Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

DatePicker.js 14 KiB

il y a 3 ans
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _extends2 = require('babel-runtime/helpers/extends');
  6. var _extends3 = _interopRequireDefault(_extends2);
  7. var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
  8. var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
  9. var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
  10. var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
  11. var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
  12. var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
  13. var _createClass2 = require('babel-runtime/helpers/createClass');
  14. var _createClass3 = _interopRequireDefault(_createClass2);
  15. var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
  16. var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
  17. var _inherits2 = require('babel-runtime/helpers/inherits');
  18. var _inherits3 = _interopRequireDefault(_inherits2);
  19. var _simpleAssign = require('simple-assign');
  20. var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
  21. var _react = require('react');
  22. var _react2 = _interopRequireDefault(_react);
  23. var _propTypes = require('prop-types');
  24. var _propTypes2 = _interopRequireDefault(_propTypes);
  25. var _dateUtils = require('./dateUtils');
  26. var _DatePickerDialog = require('./DatePickerDialog');
  27. var _DatePickerDialog2 = _interopRequireDefault(_DatePickerDialog);
  28. var _TextField = require('../TextField');
  29. var _TextField2 = _interopRequireDefault(_TextField);
  30. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  31. var DatePicker = function (_Component) {
  32. (0, _inherits3.default)(DatePicker, _Component);
  33. function DatePicker() {
  34. var _ref;
  35. var _temp, _this, _ret;
  36. (0, _classCallCheck3.default)(this, DatePicker);
  37. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  38. args[_key] = arguments[_key];
  39. }
  40. return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = DatePicker.__proto__ || (0, _getPrototypeOf2.default)(DatePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
  41. date: undefined
  42. }, _this.handleAccept = function (date) {
  43. if (!_this.isControlled()) {
  44. _this.setState({
  45. date: date
  46. });
  47. }
  48. if (_this.props.onChange) {
  49. _this.props.onChange(null, date);
  50. }
  51. }, _this.handleFocus = function (event) {
  52. event.target.blur();
  53. if (_this.props.onFocus) {
  54. _this.props.onFocus(event);
  55. }
  56. }, _this.handleClick = function (event) {
  57. if (_this.props.onClick) {
  58. _this.props.onClick(event);
  59. }
  60. if (!_this.props.disabled) {
  61. setTimeout(function () {
  62. _this.openDialog();
  63. }, 0);
  64. }
  65. }, _this.formatDate = function (date) {
  66. if (_this.props.locale) {
  67. var DateTimeFormat = _this.props.DateTimeFormat || _dateUtils.dateTimeFormat;
  68. return new DateTimeFormat(_this.props.locale, {
  69. day: 'numeric',
  70. month: 'numeric',
  71. year: 'numeric'
  72. }).format(date);
  73. } else {
  74. return (0, _dateUtils.formatIso)(date);
  75. }
  76. }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  77. }
  78. (0, _createClass3.default)(DatePicker, [{
  79. key: 'componentWillMount',
  80. value: function componentWillMount() {
  81. this.setState({
  82. date: this.isControlled() ? this.getControlledDate() : this.props.defaultDate
  83. });
  84. }
  85. }, {
  86. key: 'componentWillReceiveProps',
  87. value: function componentWillReceiveProps(nextProps) {
  88. if (this.isControlled()) {
  89. var newDate = this.getControlledDate(nextProps);
  90. if (!(0, _dateUtils.isEqualDate)(this.state.date, newDate)) {
  91. this.setState({
  92. date: newDate
  93. });
  94. }
  95. }
  96. }
  97. }, {
  98. key: 'getDate',
  99. value: function getDate() {
  100. return this.state.date;
  101. }
  102. /**
  103. * Open the date-picker dialog programmatically from a parent.
  104. */
  105. }, {
  106. key: 'openDialog',
  107. value: function openDialog() {
  108. /**
  109. * if the date is not selected then set it to new date
  110. * (get the current system date while doing so)
  111. * else set it to the currently selected date
  112. */
  113. if (this.state.date !== undefined) {
  114. this.setState({
  115. dialogDate: this.getDate()
  116. }, this.refs.dialogWindow.show);
  117. } else {
  118. this.setState({
  119. dialogDate: new Date()
  120. }, this.refs.dialogWindow.show);
  121. }
  122. }
  123. /**
  124. * Alias for `openDialog()` for an api consistent with TextField.
  125. */
  126. }, {
  127. key: 'focus',
  128. value: function focus() {
  129. this.openDialog();
  130. }
  131. }, {
  132. key: 'isControlled',
  133. value: function isControlled() {
  134. return this.props.hasOwnProperty('value');
  135. }
  136. }, {
  137. key: 'getControlledDate',
  138. value: function getControlledDate() {
  139. var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
  140. if (props.value instanceof Date) {
  141. return props.value;
  142. }
  143. }
  144. }, {
  145. key: 'render',
  146. value: function render() {
  147. var _props = this.props,
  148. DateTimeFormat = _props.DateTimeFormat,
  149. autoOk = _props.autoOk,
  150. cancelLabel = _props.cancelLabel,
  151. className = _props.className,
  152. container = _props.container,
  153. defaultDate = _props.defaultDate,
  154. dialogContainerStyle = _props.dialogContainerStyle,
  155. disableYearSelection = _props.disableYearSelection,
  156. firstDayOfWeek = _props.firstDayOfWeek,
  157. formatDateProp = _props.formatDate,
  158. locale = _props.locale,
  159. maxDate = _props.maxDate,
  160. minDate = _props.minDate,
  161. mode = _props.mode,
  162. okLabel = _props.okLabel,
  163. onDismiss = _props.onDismiss,
  164. onFocus = _props.onFocus,
  165. onShow = _props.onShow,
  166. onClick = _props.onClick,
  167. openToYearSelection = _props.openToYearSelection,
  168. shouldDisableDate = _props.shouldDisableDate,
  169. hideCalendarDate = _props.hideCalendarDate,
  170. style = _props.style,
  171. textFieldStyle = _props.textFieldStyle,
  172. utils = _props.utils,
  173. other = (0, _objectWithoutProperties3.default)(_props, ['DateTimeFormat', 'autoOk', 'cancelLabel', 'className', 'container', 'defaultDate', 'dialogContainerStyle', 'disableYearSelection', 'firstDayOfWeek', 'formatDate', 'locale', 'maxDate', 'minDate', 'mode', 'okLabel', 'onDismiss', 'onFocus', 'onShow', 'onClick', 'openToYearSelection', 'shouldDisableDate', 'hideCalendarDate', 'style', 'textFieldStyle', 'utils']);
  174. var prepareStyles = this.context.muiTheme.prepareStyles;
  175. var formatDate = formatDateProp || this.formatDate;
  176. return _react2.default.createElement(
  177. 'div',
  178. { className: className, style: prepareStyles((0, _simpleAssign2.default)({}, style)) },
  179. _react2.default.createElement(_TextField2.default, (0, _extends3.default)({}, other, {
  180. onFocus: this.handleFocus,
  181. onClick: this.handleClick,
  182. ref: 'input',
  183. style: textFieldStyle,
  184. value: this.state.date ? formatDate(this.state.date) : ''
  185. })),
  186. _react2.default.createElement(_DatePickerDialog2.default, {
  187. DateTimeFormat: DateTimeFormat,
  188. autoOk: autoOk,
  189. cancelLabel: cancelLabel,
  190. container: container,
  191. containerStyle: dialogContainerStyle,
  192. disableYearSelection: disableYearSelection,
  193. firstDayOfWeek: firstDayOfWeek,
  194. initialDate: this.state.dialogDate,
  195. locale: locale,
  196. maxDate: maxDate,
  197. minDate: minDate,
  198. mode: mode,
  199. okLabel: okLabel,
  200. onAccept: this.handleAccept,
  201. onShow: onShow,
  202. onDismiss: onDismiss,
  203. ref: 'dialogWindow',
  204. shouldDisableDate: shouldDisableDate,
  205. hideCalendarDate: hideCalendarDate,
  206. openToYearSelection: openToYearSelection,
  207. utils: utils
  208. })
  209. );
  210. }
  211. }]);
  212. return DatePicker;
  213. }(_react.Component);
  214. DatePicker.defaultProps = {
  215. autoOk: false,
  216. container: 'dialog',
  217. disabled: false,
  218. disableYearSelection: false,
  219. firstDayOfWeek: 1,
  220. hideCalendarDate: false,
  221. style: {},
  222. openToYearSelection: false
  223. };
  224. DatePicker.contextTypes = {
  225. muiTheme: _propTypes2.default.object.isRequired
  226. };
  227. DatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
  228. /**
  229. * Constructor for date formatting for the specified `locale`.
  230. * The constructor must follow this specification: ECMAScript Internationalization API 1.0 (ECMA-402).
  231. * `Intl.DateTimeFormat` is supported by most modern browsers, see http://caniuse.com/#search=intl,
  232. * otherwise https://github.com/andyearnshaw/Intl.js is a good polyfill.
  233. *
  234. * By default, a built-in `DateTimeFormat` is used which supports the 'en-US' `locale`.
  235. */
  236. DateTimeFormat: _propTypes2.default.func,
  237. /**
  238. * If true, automatically accept and close the picker on select a date.
  239. */
  240. autoOk: _propTypes2.default.bool,
  241. /**
  242. * Override the default text of the 'Cancel' button.
  243. */
  244. cancelLabel: _propTypes2.default.node,
  245. /**
  246. * The css class name of the root element.
  247. */
  248. className: _propTypes2.default.string,
  249. /**
  250. * Used to control how the Date Picker will be displayed when the input field is focused.
  251. * `dialog` (default) displays the DatePicker as a dialog with a modal.
  252. * `inline` displays the DatePicker below the input field (similar to auto complete).
  253. */
  254. container: _propTypes2.default.oneOf(['dialog', 'inline']),
  255. /**
  256. * This is the initial date value of the component.
  257. * If either `value` or `valueLink` is provided they will override this
  258. * prop with `value` taking precedence.
  259. */
  260. defaultDate: _propTypes2.default.object,
  261. /**
  262. * Override the inline-styles of DatePickerDialog's Container element.
  263. */
  264. dialogContainerStyle: _propTypes2.default.object,
  265. /**
  266. * Disables the year selection in the date picker.
  267. */
  268. disableYearSelection: _propTypes2.default.bool,
  269. /**
  270. * Disables the DatePicker.
  271. */
  272. disabled: _propTypes2.default.bool,
  273. /**
  274. * Used to change the first day of week. It varies from
  275. * Saturday to Monday between different locales.
  276. * The allowed range is 0 (Sunday) to 6 (Saturday).
  277. * The default is `1`, Monday, as per ISO 8601.
  278. */
  279. firstDayOfWeek: _propTypes2.default.number,
  280. /**
  281. * This function is called to format the date displayed in the input field, and should return a string.
  282. * By default if no `locale` and `DateTimeFormat` is provided date objects are formatted to ISO 8601 YYYY-MM-DD.
  283. *
  284. * @param {object} date Date object to be formatted.
  285. * @returns {any} The formatted date.
  286. */
  287. formatDate: _propTypes2.default.func,
  288. /**
  289. * Hide date display
  290. */
  291. hideCalendarDate: _propTypes2.default.bool,
  292. /**
  293. * Locale used for formatting the `DatePicker` date strings. Other than for 'en-US', you
  294. * must provide a `DateTimeFormat` that supports the chosen `locale`.
  295. */
  296. locale: _propTypes2.default.string,
  297. /**
  298. * The ending of a range of valid dates. The range includes the endDate.
  299. * The default value is current date + 100 years.
  300. */
  301. maxDate: _propTypes2.default.object,
  302. /**
  303. * The beginning of a range of valid dates. The range includes the startDate.
  304. * The default value is current date - 100 years.
  305. */
  306. minDate: _propTypes2.default.object,
  307. /**
  308. * Tells the component to display the picker in portrait or landscape mode.
  309. */
  310. mode: _propTypes2.default.oneOf(['portrait', 'landscape']),
  311. /**
  312. * Override the default text of the 'OK' button.
  313. */
  314. okLabel: _propTypes2.default.node,
  315. /**
  316. * Callback function that is fired when the date value changes.
  317. *
  318. * @param {null} null Since there is no particular event associated with the change,
  319. * the first argument will always be null.
  320. * @param {object} date The new date.
  321. */
  322. onChange: _propTypes2.default.func,
  323. /**
  324. * Callback function that is fired when a click event occurs on the Date Picker's `TextField`.
  325. *
  326. * @param {object} event Click event targeting the `TextField`.
  327. */
  328. onClick: _propTypes2.default.func,
  329. /**
  330. * Callback function that is fired when the Date Picker's dialog is dismissed.
  331. */
  332. onDismiss: _propTypes2.default.func,
  333. /**
  334. * Callback function that is fired when the Date Picker's `TextField` gains focus.
  335. */
  336. onFocus: _propTypes2.default.func,
  337. /**
  338. * Callback function that is fired when the Date Picker's dialog is shown.
  339. */
  340. onShow: _propTypes2.default.func,
  341. /**
  342. * If true sets the datepicker to open to year selection first.
  343. */
  344. openToYearSelection: _propTypes2.default.bool,
  345. /**
  346. * Callback function used to determine if a day's entry should be disabled on the calendar.
  347. *
  348. * @param {object} day Date object of a day.
  349. * @returns {boolean} Indicates whether the day should be disabled.
  350. */
  351. shouldDisableDate: _propTypes2.default.func,
  352. /**
  353. * Override the inline-styles of the root element.
  354. */
  355. style: _propTypes2.default.object,
  356. /**
  357. * Override the inline-styles of DatePicker's TextField element.
  358. */
  359. textFieldStyle: _propTypes2.default.object,
  360. /**
  361. * This object should contain methods needed to build the calendar system.
  362. *
  363. * Useful for building a custom calendar system. Refer to the
  364. * [source code](https://github.com/mui-org/material-ui/blob/v0.x/src/DatePicker/dateUtils.js)
  365. * and an [example implementation](https://github.com/alitaheri/material-ui-persian-date-picker-utils)
  366. * for more information.
  367. */
  368. utils: _propTypes2.default.object,
  369. /**
  370. * Sets the date for the Date Picker programmatically.
  371. */
  372. value: _propTypes2.default.object
  373. } : {};
  374. exports.default = DatePicker;