[DatePicker] add proporty needed for Intl

Author: oliviertassinari

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 one that only support 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 formating date. If you are not using the default value, ' +
+            'you have to provide a DateTimeFormat that support it. You can use Intl.DateTimeFormat' +
+            ' if it\'s supported by your environment. https://github.com/andyearnshaw/Intl.js is a good polyfill.',
+          },
+          {
+            name: 'wording',
+            type: 'object',
+            header: 'default: {ok: \'OK\', cancel: \'Cancel\' }',
+            desc: 'Wording used inside the button of the dialog.',
+          },
           {
             name: 'autoOk',
             type: 'bool',

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');
@@ -44,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,
@@ -81,10 +82,16 @@ const CalendarToolbar = React.createClass({
   },
 
   render() {
-    const dateTimeFormated = new DateTime.DateTimeFormat('en-US', {
+    const {
+      DateTimeFormat,
+      locale,
+      displayDate,
+    } = this.props
+
+    const dateTimeFormated = new DateTimeFormat(locale, {
       month: 'long',
       year: 'numeric',
-    }).format(this.props.displayDate);
+    }).format(displayDate);
 
     const nextButtonIcon = this.state.muiTheme.isRtl ? <NavigationChevronRight /> : <NavigationChevronLeft />;
     const prevButtonIcon = this.state.muiTheme.isRtl ? <NavigationChevronLeft /> : <NavigationChevronRight />;

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,
@@ -125,14 +125,16 @@ const DateDisplay = React.createClass({
 
   render() {
     let {
+      DateTimeFormat,
+      locale,
       selectedDate,
       style,
       ...other,
     } = this.props;
     const year = this.props.selectedDate.getFullYear();
     const styles = this.getStyles();
 
-    const dateTimeFormated = new DateTime.DateTimeFormat('en-US', {
+    const dateTimeFormated = new DateTimeFormat(locale, {
       month: 'short',
       weekday: 'short',
       day: '2-digit',

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}

src/utils/date-time.js

@@ -1,9 +1,15 @@
 
+const dayList = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const monthList = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
+  'Oct', 'Nov', 'Dec'];
+const monthLongList = ['January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December'];
+
 function DateTimeFormat(locale, options) {
   this.options = options;
 
   if (process.env.NODE_ENV !== 'production' && locale !== 'en-US') {
-    console.warn('Wrong usage of DateTimeFormat');
+    console.warn('Wrong usage of DateTimeFormat. The ' + locale +' locale is not supported.');
   }
 
   this.format = function(date) {
@@ -13,116 +19,13 @@ function DateTimeFormat(locale, options) {
       options.weekday === 'short' &&
       options.day === '2-digit') {
 
-      const day = date.getDay();
-      switch (day) {
-        case 0:
-          output = 'Sun';
-          break;
-        case 1:
-          output = 'Mon';
-          break;
-        case 2:
-          output = 'Tue';
-          break;
-        case 3:
-          output = 'Wed';
-          break;
-        case 4:
-          output = 'Thu';
-          break;
-        case 5:
-          output = 'Fri';
-          break;
-        case 6:
-          output = 'Sat';
-          break;
-      }
-
-      output += ', ';
-
-      const month = date.getMonth();
-      switch (month) {
-        case 0:
-          output += 'Jan';
-          break;
-        case 1:
-          output += 'Feb';
-          break;
-        case 2:
-          output += 'Mar';
-          break;
-        case 3:
-          output += 'Apr';
-          break;
-        case 4:
-          output += 'May';
-          break;
-        case 5:
-          output += 'Jun';
-          break;
-        case 6:
-          output += 'Jul';
-          break;
-        case 7:
-          output += 'Aug';
-          break;
-        case 8:
-          output += 'Sep';
-          break;
-        case 9:
-          output += 'Oct';
-          break;
-        case 10:
-          output += 'Nov';
-          break;
-        case 11:
-          output += 'Dec';
-          break;
-      }
-
-      output += ' ' + date.getDate()
+      output = dayList[date.getDay()] + ', ';
+      output += monthList[date.getMonth()] + ' ';
+      output += date.getDate();
     } else if (options.month === 'long'
         && options.year === 'numeric') {
 
-      switch (date.getMonth()) {
-        case 0:
-          output = 'January';
-          break;
-        case 1:
-          output = 'February';
-          break;
-        case 2:
-          output = 'March';
-          break;
-        case 3:
-          output = 'April';
-          break;
-        case 4:
-          output = 'May';
-          break;
-        case 5:
-          output = 'June';
-          break;
-        case 6:
-          output = 'July';
-          break;
-        case 7:
-          output = 'August';
-          break;
-        case 8:
-          output = 'September';
-          break;
-        case 9:
-          output = 'October';
-          break;
-        case 10:
-          output = 'November';
-          break;
-        case 11:
-          output = 'December';
-          break;
-      }
-
+      output = monthLongList[date.getMonth()];
       output += ' ' + date.getFullYear();
     } else if (process.env.NODE_ENV !== 'production') {
       console.warn('Wrong usage of DateTimeFormat');