diff --git a/CHANGELOG.md b/CHANGELOG.md index 767a31cd5ad679..d32d9047fab67e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,9 +6,10 @@ - [RaisedButton] Fix:className now set to root element(#3122) - [LeftNav] Fix:className and `style` now set to root element(#3322) - [Colors] Removed default export in favor of singular exports (#2825)
-**Note** This can be temoporary worked around by changing
+**Note** This can be temporarily worked around by changing
`import Colors from 'material-ui/lib/styles/colors';`
to
`import * as Colors from 'material-ui/lib/styles/colors';`. +- [DatePicker] Standardize for ISO8601. (#3417) ## 0.14.4 ###### _Feb 02, 2016_ diff --git a/ROADMAP.md b/ROADMAP.md index f7809eb2606c9a..9215f6ff4ada81 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -9,7 +9,7 @@ The roadmap is a living document, and it is likely that priorities will change, - [x] Remove deprecated usage of JSON to generate children across the components. - [x] [[#3108](https://github.com/callemall/material-ui/pull/3108)] Remove deprecated components, methods & props. - [ ] [[#2957](https://github.com/callemall/material-ui/issues/2957)] Standardize callback signatures. -- [ ] [[#2980](https://github.com/callemall/material-ui/issues/2980)] [[#1839](https://github.com/callemall/material-ui/issues/1839)] Standardise Datepicker for ISO8601. +- [x] [[#2980](https://github.com/callemall/material-ui/issues/2980)] [[#1839](https://github.com/callemall/material-ui/issues/1839)] Standardise Datepicker for ISO8601. #### Deprecations diff --git a/docs/src/app/components/pages/components/DatePicker/ExampleInternational.jsx b/docs/src/app/components/pages/components/DatePicker/ExampleInternational.jsx index c1e08f7127170c..39be010a3511a6 100644 --- a/docs/src/app/components/pages/components/DatePicker/ExampleInternational.jsx +++ b/docs/src/app/components/pages/components/DatePicker/ExampleInternational.jsx @@ -4,26 +4,42 @@ import areIntlLocalesSupported from 'intl-locales-supported'; let DateTimeFormat; -// Use the native Intl if available -if (areIntlLocalesSupported('fr')) { +/** + * Use the native Intl.DateTimeFormat if available, or a polyfill if not. + */ +if (areIntlLocalesSupported(['fr', 'en-US'])) { DateTimeFormat = global.Intl.DateTimeFormat; } else { const IntlPolyfill = require('intl'); - require('intl/locale-data/jsonp/fr'); - DateTimeFormat = IntlPolyfill.DateTimeFormat; + require('intl/locale-data/jsonp/fr'); + require('intl/locale-data/jsonp/en-US'); } const DatePickerExampleInternational = () => ( - +
+ + + +
); export default DatePickerExampleInternational; diff --git a/docs/src/app/components/pages/components/DatePicker/Page.jsx b/docs/src/app/components/pages/components/DatePicker/Page.jsx index 7fa9fd6b6bd7be..ccd666ab3a2db2 100644 --- a/docs/src/app/components/pages/components/DatePicker/Page.jsx +++ b/docs/src/app/components/pages/components/DatePicker/Page.jsx @@ -28,8 +28,12 @@ const descriptions = { controlled: '`DatePicker` can be implemented as a controlled input, where `value` is handled by state in the ' + 'parent component.', disabledDates: '`DatePicker` can disable specific dates based on the return value of a callback.', - localised: 'Date Picker can be localised using the `locale` property, in this case in French. ' + - 'Note that the buttons must be localised using the `wordings` property, and we set the `firstDayOfWeek` to Monday.', + localised: '`DatePicker` can be localised using the `locale` property. The first example is localised in French. ' + + 'Note that the buttons must be separately localised using the `cancelLabel` and `okLabel` properties. \n\n' + + 'The `firstDayOfWeek` property defaults to `1`, (Monday), so may also need to be set for the target locale. ' + + 'The second example shows sets `firstDayOfWeek` to `0`, (Sunday), and `locale` to `en-US` which matches the ' + + 'bahavior of the Date Picker prior to 0.15.0.\n\n' + + 'The final example displays the resulting date in a custom format using the `formatDate` property.', }; const DatePickerPage = () => ( diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx index 638d6a8863f6b2..3405e81fd21bcc 100644 --- a/src/date-picker/date-picker.jsx +++ b/src/date-picker/date-picker.jsx @@ -8,8 +8,10 @@ const DatePicker = React.createClass({ propTypes: { /** - * Constructor for time formatting. - * Follow this specification: ECMAScript Internationalization API 1.0 (ECMA-402). + * Constructor for date formatting for the specified `locale`. + * The constructor must follow this specification: ECMAScript Internationalization API 1.0 (ECMA-402). + * `Intl.DateTimeFormat` is supported by most modern browsers, see http://caniuse.com/#search=intl, + * otherwise https://github.com/andyearnshaw/Intl.js is a good polyfill. */ DateTimeFormat: React.PropTypes.func, @@ -43,23 +45,24 @@ const DatePicker = React.createClass({ disabled: React.PropTypes.bool, /** - * Used to change the first day of week. It drastically varies from - * Saturday to Monday (could even be Friday) between different locales. + * Used to change the first day of week. It varies from + * Saturday to Monday between different locales. * The allowed range is 0 (Sunday) to 6 (Saturday). + * The default is `1`, Monday, as per ISO 8601. */ firstDayOfWeek: React.PropTypes.number, /** - * This function is called to format the date to display in the input box. - * By default, date objects are formatted to MM/DD/YYYY. + * This function is called to format the date displayed in the input box, and should return a string. + * By default if no `locale` and `DateTimeFormat` is provided date objects are formatted to ISO 8601 YYYY-MM-DD. + * + * @param {object} date `Date` object to be formatted. */ formatDate: React.PropTypes.func, /** - * Locale used for formatting date. If you are not using the default value, you - * have to provide a DateTimeFormat that supports it. You can use Intl.DateTimeFormat - * if it's supported by your environment. - * https://github.com/andyearnshaw/Intl.js is a good polyfill. + * Locale used for formatting the dialog date strings. If you are not using the default value, you + * have to provide a `DateTimeFormat` that supports it. */ locale: React.PropTypes.string, @@ -88,17 +91,17 @@ const DatePicker = React.createClass({ onChange: React.PropTypes.func, /** - * Fired when the datepicker dialog is dismissed. + * Fired when the Date Picker dialog is dismissed. */ onDismiss: React.PropTypes.func, /** - * Callback function that is fired when the datepicker field gains focus. + * Fired when the Date Picker field gains focus. */ onFocus: React.PropTypes.func, /** - * Fired when the datepicker dialog is shown. + * Fired when the Date Picker dialog is shown. */ onShow: React.PropTypes.func, @@ -109,7 +112,7 @@ const DatePicker = React.createClass({ /** * Called during render time of a given day. If this method returns - * false the day is disabled otherwise it is displayed normally. + * false the day is disabled, otherwise it is displayed normally. */ shouldDisableDate: React.PropTypes.func, @@ -149,11 +152,10 @@ const DatePicker = React.createClass({ getDefaultProps() { return { - formatDate: DateTime.format, autoOk: false, disableYearSelection: false, style: {}, - firstDayOfWeek: 0, + firstDayOfWeek: 1, disabled: false, }; }, @@ -244,6 +246,18 @@ const DatePicker = React.createClass({ } }, + _formatDate(date) { + if (this.props.locale && this.props.DateTimeFormat) { + return new this.props.DateTimeFormat(this.props.locale, { + day: 'numeric', + month: 'numeric', + year: 'numeric', + }).format(date); + } else { + return DateTime.format(date); + } + }, + render() { const { container, @@ -252,7 +266,6 @@ const DatePicker = React.createClass({ wordings, autoOk, defaultDate, - formatDate, maxDate, minDate, mode, @@ -268,9 +281,8 @@ const DatePicker = React.createClass({ ...other, } = this.props; - const { - prepareStyles, - } = this.state.muiTheme; + const formatDate = this.props.formatDate || this._formatDate; + const {prepareStyles} = this.state.muiTheme; return (
diff --git a/src/utils/date-time.js b/src/utils/date-time.js index eb08dd3a42eaa9..c7be41cd667192 100644 --- a/src/utils/date-time.js +++ b/src/utils/date-time.js @@ -134,11 +134,9 @@ export default { return weekdayFormatter.format(this.addDays(firstDayDate, day + firstDayOfWeek)); }, + // Convert date to ISO8601 (YYYY-MM-DD) date string, accounting for current timezone format(date) { - const m = date.getMonth() + 1; - const d = date.getDate(); - const y = date.getFullYear(); - return `${m}/${d}/${y}`; + return (new Date(`${date.toDateString()} 12:00:00 +0000`)).toISOString().substring(0, 10); }, /**