Merge pull request mui#1658 from oliviertassinari/date-picker-intl

[DatePicker] add Intl support

docs/src/app/components/pages/components/date-picker.jsx

@@ -29,6 +29,27 @@ export default class DatePickerPage extends React.Component {
       {
         name: 'Props',
         infoArray: [
+          {
+            name: 'DateTimeFormat',
+            type: 'func',
+            header: 'default: custom function defined inside utils/date-time.js that only supports en-US locale',
+            desc: 'Constructor for time formatting. Follow this specificaction: ' +
+            'ECMAScript Internationalization API 1.0 (ECMA-402).',
+          },
+          {
+            name: 'locale',
+            type: 'string',
+            header: 'default: en-US',
+            desc: '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.',
+          },
+          {
+            name: 'wordings',
+            type: 'object',
+            header: 'default: {ok: \'OK\', cancel: \'Cancel\' }',
+            desc: 'Wordings used inside the button of the dialog.',
+          },
           {
             name: 'autoOk',
             type: 'bool',
@@ -195,6 +216,13 @@ export default class DatePickerPage extends React.Component {
             maxDate={this.state.maxDate}
             showYearSelector={this.state.showYearSelector} />
 
+          <DatePicker
+            hintText="fr version"
+            DateTimeFormat={Intl.DateTimeFormat}
+            // Intl is defined by the browser see http://caniuse.com/#search=intl
+            wordings={{ok: 'OK', cancel: 'Annuler'}}
+            locale="fr" />
+
           <div style={optionsStyle}>
             <TextField
               floatingLabelText="Min Date"

docs/src/app/components/raw-code/date-picker-code.txt

@@ -16,3 +16,10 @@
   minDate={this.state.minDate}
   maxDate={this.state.maxDate}
   showYearSelector={this.state.showYearSelector} />
+
+<DatePicker
+  hintText="fr version"
+  // Intl is defined by the browser see http://caniuse.com/#search=intl
+  DateTimeFormat={Intl.DateTimeFormat}
+  wordings={{ok: 'OK', cancel: 'Annuler'}}
+  locale="fr" />

src/date-picker/calendar-toolbar.jsx

@@ -1,5 +1,4 @@
 const React = require('react');
-const DateTime = require('../utils/date-time');
 const IconButton = require('../icon-button');
 const Toolbar = require('../toolbar/toolbar');
 const ToolbarGroup = require('../toolbar/toolbar-group');
@@ -9,6 +8,24 @@ const SlideInTransitionGroup = require('../transition-groups/slide-in');
 const ThemeManager = require('../styles/theme-manager');
 const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme');
 
+const styles = {
+  root: {
+    position: 'relative',
+    padding: 0,
+    backgroundColor: 'inherit',
+  },
+  title: {
+    position: 'absolute',
+    top: 17,
+    lineHeight: '14px',
+    fontSize: 14,
+    height: 14,
+    width: '100%',
+    fontWeight: '500',
+    textAlign: 'center',
+  },
+};
+
 const CalendarToolbar = React.createClass({
   contextTypes: {
     muiTheme: React.PropTypes.object,
@@ -26,6 +43,8 @@ const CalendarToolbar = React.createClass({
   },
 
   propTypes: {
+    DateTimeFormat: React.PropTypes.func.isRequired,
+    locale: React.PropTypes.string.isRequired,
     displayDate: React.PropTypes.object.isRequired,
     nextMonth: React.PropTypes.bool,
     onMonthChange: React.PropTypes.func,
@@ -62,31 +81,17 @@ const CalendarToolbar = React.createClass({
     }
   },
 
-  _styles() {
-    return {
-      root: {
-        position: 'relative',
-        padding: 0,
-        backgroundColor: 'inherit',
-      },
-
-      title: {
-        position: 'absolute',
-        top: '17px',
-        lineHeight: '14px',
-        fontSize: '14px',
-        height: '14px',
-        width: '100%',
-        fontWeight: '500',
-        textAlign: 'center',
-      },
-    };
-  },
-
   render() {
-    let month = DateTime.getFullMonth(this.props.displayDate);
-    let year = this.props.displayDate.getFullYear();
-    let styles = this._styles();
+    const {
+      DateTimeFormat,
+      locale,
+      displayDate,
+    } = this.props
+
+    const dateTimeFormatted = new DateTimeFormat(locale, {
+      month: 'long',
+      year: 'numeric',
+    }).format(displayDate);
 
     const nextButtonIcon = this.state.muiTheme.isRtl ? <NavigationChevronRight /> : <NavigationChevronLeft />;
     const prevButtonIcon = this.state.muiTheme.isRtl ? <NavigationChevronLeft /> : <NavigationChevronRight />;
@@ -96,7 +101,7 @@ const CalendarToolbar = React.createClass({
         <SlideInTransitionGroup
           style={styles.title}
           direction={this.state.transitionDirection}>
-          <div key={month + '_' + year}>{month} {year}</div>
+          <div key={dateTimeFormatted}>{dateTimeFormatted}</div>
         </SlideInTransitionGroup>
 
         <ToolbarGroup key={0} float="left">

src/date-picker/calendar.jsx

@@ -34,6 +34,8 @@ const Calendar = React.createClass({
   },
 
   propTypes: {
+    DateTimeFormat: React.PropTypes.func.isRequired,
+    locale: React.PropTypes.string.isRequired,
     disableYearSelection: React.PropTypes.bool,
     initialDate: React.PropTypes.object,
     isActive: React.PropTypes.bool,
@@ -133,10 +135,16 @@ const Calendar = React.createClass({
     };
 
     const weekTitleDayStyle = this.prepareStyles(styles.weekTitleDay);
+    const {
+      DateTimeFormat,
+      locale,
+    } = this.props;
 
     return (
       <ClearFix style={this.mergeStyles(styles.root)}>
         <DateDisplay
+          DateTimeFormat={DateTimeFormat}
+          locale={locale}
           disableYearSelection={this.props.disableYearSelection}
           style={styles.dateDisplay}
           selectedDate={this.state.selectedDate}
@@ -148,6 +156,8 @@ const Calendar = React.createClass({
         {this.state.displayMonthDay &&
         <div style={this.prepareStyles(styles.calendarContainer)}>
           <CalendarToolbar
+            DateTimeFormat={DateTimeFormat}
+            locale={locale}
             displayDate={this.state.displayDate}
             onMonthChange={this._handleMonthChange}
             prevMonth={toolbarInteractions.prevMonth}

src/date-picker/date-display.jsx

@@ -1,8 +1,6 @@
 const React = require('react');
 const StylePropable = require('../mixins/style-propable');
-const DateTime = require('../utils/date-time');
 const Transitions = require('../styles/transitions');
-const AutoPrefix = require('../styles/auto-prefix');
 const SlideInTransitionGroup = require('../transition-groups/slide-in');
 const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme');
 const ThemeManager = require('../styles/theme-manager');
@@ -16,6 +14,8 @@ const DateDisplay = React.createClass({
   },
 
   propTypes: {
+    DateTimeFormat: React.PropTypes.func.isRequired,
+    locale: React.PropTypes.string.isRequired,
     disableYearSelection: React.PropTypes.bool,
     monthDaySelected: React.PropTypes.bool,
     selectedDate: React.PropTypes.object.isRequired,
@@ -85,12 +85,6 @@ const DateDisplay = React.createClass({
         padding: 20,
       },
 
-      month: {
-        display: isLandscape ? 'block' : undefined,
-        marginLeft: isLandscape ? undefined : 8,
-        marginTop: isLandscape ? 5 : undefined,
-      },
-
       monthDay: {
         root: {
           display: 'inline-block',
@@ -131,15 +125,20 @@ const DateDisplay = React.createClass({
 
   render() {
     let {
+      DateTimeFormat,
+      locale,
       selectedDate,
       style,
       ...other,
     } = this.props;
-    let dayOfWeek = DateTime.getDayOfWeek(this.props.selectedDate);
-    let month = DateTime.getShortMonth(this.props.selectedDate);
-    let day = this.props.selectedDate.getDate();
-    let year = this.props.selectedDate.getFullYear();
-    let styles = this.getStyles();
+    const year = this.props.selectedDate.getFullYear();
+    const styles = this.getStyles();
+
+    const dateTimeFormatted = new DateTimeFormat(locale, {
+      month: 'short',
+      weekday: 'short',
+      day: '2-digit',
+    }).format(this.props.selectedDate);
 
     return (
     <div {...other} style={this.prepareStyles(styles.root, this.props.style)}>
@@ -153,11 +152,10 @@ const DateDisplay = React.createClass({
           style={styles.monthDay.root}
           direction={this.state.transitionDirection}>
             <div
-              key={dayOfWeek + month + day}
+              key={dateTimeFormatted}
               style={styles.monthDay.title}
               onTouchTap={this._handleMonthDayClick}>
-                <span>{dayOfWeek},</span>
-                <span style={styles.month}>{month} {day}</span>
+                {dateTimeFormatted}
             </div>
         </SlideInTransitionGroup>
       </div>

src/date-picker/date-picker-dialog.jsx

@@ -10,6 +10,7 @@ const Dialog = require('../dialog');
 const FlatButton = require('../flat-button');
 const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme');
 const ThemeManager = require('../styles/theme-manager');
+const DateTime = require('../utils/date-time');
 
 const DatePickerDialog = React.createClass({
 
@@ -38,6 +39,9 @@ const DatePickerDialog = React.createClass({
   },
 
   propTypes: {
+    DateTimeFormat: React.PropTypes.func,
+    locale: React.PropTypes.string,
+    wordings: React.PropTypes.object,
     disableYearSelection: React.PropTypes.bool,
     initialDate: React.PropTypes.object,
     maxDate: React.PropTypes.object,
@@ -61,6 +65,17 @@ const DatePickerDialog = React.createClass({
     };
   },
 
+  getDefaultProps: function() {
+    return {
+      DateTimeFormat: DateTime.DateTimeFormat,
+      locale: 'en-US',
+      wordings: {
+        ok: 'OK',
+        cancel: 'Cancel',
+      },
+    };
+  },
+
   windowListeners: {
     keyup: '_handleWindowKeyUp',
   },
@@ -81,6 +96,9 @@ const DatePickerDialog = React.createClass({
 
   render() {
     let {
+      DateTimeFormat,
+      locale,
+      wordings,
       initialDate,
       onAccept,
       style,
@@ -113,7 +131,7 @@ const DatePickerDialog = React.createClass({
     let actions = [
       <FlatButton
         key={0}
-        label="Cancel"
+        label={wordings.cancel}
         secondary={true}
         style={styles.actions}
         onTouchTap={this._handleCancelTouchTap} />,
@@ -123,7 +141,7 @@ const DatePickerDialog = React.createClass({
       actions.push(
         <FlatButton
           key={1}
-          label="OK"
+          label={wordings.ok}
           secondary={true}
           disabled={this.refs.calendar !== undefined && this.refs.calendar.isSelectedDateDisabled()}
           style={styles.actions}
@@ -143,6 +161,8 @@ const DatePickerDialog = React.createClass({
         onClickAway={this._handleDialogClickAway}
         repositionOnUpdate={false}>
         <Calendar
+          DateTimeFormat={DateTimeFormat}
+          locale={locale}
           ref="calendar"
           onDayTouchTap={this._onDayTouchTap}
           initialDate={this.props.initialDate}

src/date-picker/date-picker.jsx

@@ -28,6 +28,9 @@ const DatePicker = React.createClass({
   },
 
   propTypes: {
+    DateTimeFormat: React.PropTypes.func,
+    locale: React.PropTypes.string,
+    wordings: React.PropTypes.object,
     autoOk: React.PropTypes.bool,
     defaultDate: React.PropTypes.object,
     formatDate: React.PropTypes.func,
@@ -80,6 +83,9 @@ const DatePicker = React.createClass({
 
   render() {
     let {
+      DateTimeFormat,
+      locale,
+      wordings,
       autoOk,
       defaultDate,
       formatDate,
@@ -108,6 +114,9 @@ const DatePicker = React.createClass({
           onTouchTap={this._handleInputTouchTap}/>
         <DatePickerDialog
           ref="dialogWindow"
+          DateTimeFormat={DateTimeFormat}
+          locale={locale}
+          wordings={wordings}
           mode={mode}
           initialDate={this.state.dialogDate}
           onAccept={this._handleDialogAccept}