[DatePicker] Improve the i18n support

Closes #5101.

Author: oliviertassinari

docs/src/app/components/pages/components/DatePicker/ExampleInternational.js

@@ -7,12 +7,13 @@ let DateTimeFormat;
 /**
  * Use the native Intl.DateTimeFormat if available, or a polyfill if not.
  */
-if (areIntlLocalesSupported(['fr'])) {
+if (areIntlLocalesSupported(['fr', 'fa-IR'])) {
   DateTimeFormat = global.Intl.DateTimeFormat;
 } else {
   const IntlPolyfill = require('intl');
   DateTimeFormat = IntlPolyfill.DateTimeFormat;
   require('intl/locale-data/jsonp/fr');
+  require('intl/locale-data/jsonp/fa-IR');
 }
 
 /**
@@ -34,6 +35,13 @@ const DatePickerExampleInternational = () => (
       cancelLabel="Annuler"
       locale="fr"
     />
+    <DatePicker
+      hintText="fa-IR locale"
+      DateTimeFormat={DateTimeFormat}
+      okLabel="خوب"
+      cancelLabel="لغو کردن"
+      locale="fa-IR"
+    />
     <DatePicker
       hintText="en-US locale"
       locale="en-US"

src/DatePicker/Calendar.js

@@ -17,7 +17,6 @@ import {
   dateTimeFormat,
   isAfterDate,
   isBeforeDate,
-  getWeekArray,
   getFirstDayOfMonth,
   localizedWeekday,
   monthDiff,
@@ -222,21 +221,23 @@ class Calendar extends Component {
   };
 
   yearSelector() {
-    if (!this.props.disableYearSelection) return (
-      <CalendarYear
-        key={'years'}
-        displayDate={this.state.displayDate}
-        onTouchTapYear={this.handleTouchTapYear}
-        selectedDate={this.state.selectedDate}
-        minDate={this.props.minDate}
-        maxDate={this.props.maxDate}
-      />
-    );
+    if (!this.props.disableYearSelection) {
+      return (
+        <CalendarYear
+          key="years"
+          DateTimeFormat={this.props.DateTimeFormat}
+          locale={this.props.locale}
+          onTouchTapYear={this.handleTouchTapYear}
+          selectedDate={this.state.selectedDate}
+          minDate={this.props.minDate}
+          maxDate={this.props.maxDate}
+        />
+      );
+    }
   }
 
   render() {
     const {prepareStyles} = this.context.muiTheme;
-    const weekCount = getWeekArray(this.state.displayDate, this.props.firstDayOfWeek).length;
     const toolbarInteractions = this.getToolbarInteractions();
     const isLandscape = this.props.mode === 'landscape';
     const {calendarTextColor} = this.context.muiTheme.datePicker;
@@ -291,6 +292,8 @@ class Calendar extends Component {
     const weekTitleDayStyle = prepareStyles(styles.weekTitleDay);
 
     const {
+      minDate,
+      maxDate,
       cancelLabel,
       DateTimeFormat,
       firstDayOfWeek,
@@ -315,7 +318,6 @@ class Calendar extends Component {
           monthDaySelected={this.state.displayMonthDay}
           mode={this.props.mode}
           selectedDate={this.state.selectedDate}
-          weekCount={weekCount}
         />
         <div style={prepareStyles(styles.calendar)}>
           {this.state.displayMonthDay &&
@@ -337,11 +339,13 @@ class Calendar extends Component {
               </div>
               <SlideInTransitionGroup direction={this.state.transitionDirection} style={styles.transitionSlide}>
                 <CalendarMonth
+                  DateTimeFormat={DateTimeFormat}
+                  locale={locale}
                   displayDate={this.state.displayDate}
                   firstDayOfWeek={this.props.firstDayOfWeek}
                   key={this.state.displayDate.toDateString()}
-                  minDate={this.props.minDate}
-                  maxDate={this.props.maxDate}
+                  minDate={minDate}
+                  maxDate={maxDate}
                   onTouchTapDay={this.handleTouchTapDay}
                   ref="calendar"
                   selectedDate={this.state.selectedDate}

src/DatePicker/CalendarMonth.js

@@ -2,11 +2,34 @@ import React, {Component, PropTypes} from 'react';
 import {isBetweenDates, isEqualDate, getWeekArray} from './dateUtils';
 import DayButton from './DayButton';
 
+const styles = {
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    fontWeight: 400,
+    height: 228,
+    lineHeight: 2,
+    position: 'relative',
+    textAlign: 'center',
+    MozPaddingStart: 0,
+  },
+  week: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    height: 34,
+    marginBottom: 2,
+  },
+};
+
 class CalendarMonth extends Component {
   static propTypes = {
+    DateTimeFormat: PropTypes.func.isRequired,
     autoOk: PropTypes.bool,
     displayDate: PropTypes.object.isRequired,
     firstDayOfWeek: PropTypes.number,
+    locale: PropTypes.string.isRequired,
     maxDate: PropTypes.object,
     minDate: PropTypes.object,
     onTouchTapDay: PropTypes.func,
@@ -19,7 +42,9 @@ class CalendarMonth extends Component {
   }
 
   handleTouchTapDay = (event, date) => {
-    if (this.props.onTouchTapDay) this.props.onTouchTapDay(event, date);
+    if (this.props.onTouchTapDay) {
+      this.props.onTouchTapDay(event, date);
+    }
   };
 
   shouldDisableDate(day) {
@@ -35,16 +60,22 @@ class CalendarMonth extends Component {
 
     return weekArray.map((week, i) => {
       return (
-        <div key={i} style={this.styles.week}>
+        <div key={i} style={styles.week}>
           {this.getDayElements(week, i)}
         </div>
       );
     }, this);
   }
 
   getDayElements(week, i) {
+    const {
+      DateTimeFormat,
+      locale,
+      selectedDate,
+    } = this.props;
+
     return week.map((day, j) => {
-      const isSameDate = isEqualDate(this.props.selectedDate, day);
+      const isSameDate = isEqualDate(selectedDate, day);
       const disabled = this.shouldDisableDate(day);
       const selected = !disabled && isSameDate;
 
@@ -54,6 +85,8 @@ class CalendarMonth extends Component {
 
       return (
         <DayButton
+          DateTimeFormat={DateTimeFormat}
+          locale={locale}
           date={day}
           disabled={disabled}
           key={`db${(i + j)}`}
@@ -64,30 +97,9 @@ class CalendarMonth extends Component {
     }, this);
   }
 
-  styles = {
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'flex-start',
-      fontWeight: 400,
-      height: 228,
-      lineHeight: 2,
-      position: 'relative',
-      textAlign: 'center',
-      MozPaddingStart: 0,
-    },
-    week: {
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'space-around',
-      height: 34,
-      marginBottom: 2,
-    },
-  };
-
   render() {
     return (
-      <div style={this.styles.root}>
+      <div style={styles.root}>
         {this.getWeekElements()}
       </div>
     );

src/DatePicker/CalendarYear.js

@@ -5,9 +5,10 @@ import {cloneDate} from './dateUtils';
 
 class CalendarYear extends Component {
   static propTypes = {
-    displayDate: PropTypes.object.isRequired,
-    maxDate: PropTypes.object,
-    minDate: PropTypes.object,
+    DateTimeFormat: PropTypes.func.isRequired,
+    locale: PropTypes.string.isRequired,
+    maxDate: PropTypes.object.isRequired,
+    minDate: PropTypes.object.isRequired,
     onTouchTapYear: PropTypes.func,
     selectedDate: PropTypes.object.isRequired,
     wordings: PropTypes.object,
@@ -26,27 +27,41 @@ class CalendarYear extends Component {
   }
 
   getYears() {
-    const minYear = this.props.minDate.getFullYear();
-    const maxYear = this.props.maxDate.getFullYear();
-
+    const {
+      DateTimeFormat,
+      locale,
+      minDate,
+      maxDate,
+      selectedDate,
+    } = this.props;
+
+    const minYear = minDate.getFullYear();
+    const maxYear = maxDate.getFullYear();
     const years = [];
-    const dateCheck = cloneDate(this.props.selectedDate);
+    const dateCheck = cloneDate(selectedDate);
+
     for (let year = minYear; year <= maxYear; year++) {
       dateCheck.setFullYear(year);
-      const selected = this.props.selectedDate.getFullYear() === year;
-      let selectedProps = {};
+      const selected = selectedDate.getFullYear() === year;
+      const selectedProps = {};
       if (selected) {
-        selectedProps = {ref: 'selectedYearButton'};
+        selectedProps.ref = 'selectedYearButton';
       }
 
+      const yearFormated = new DateTimeFormat(locale, {
+        year: 'numeric',
+      }).format(dateCheck);
+
       const yearButton = (
         <YearButton
           key={`yb${year}`}
           onTouchTap={this.handleTouchTapYear}
           selected={selected}
           year={year}
           {...selectedProps}
-        />
+        >
+          {yearFormated}
+        </YearButton>
       );
 
       years.push(yearButton);
@@ -56,7 +71,9 @@ class CalendarYear extends Component {
   }
 
   scrollToSelectedYear() {
-    if (this.refs.selectedYearButton === undefined) return;
+    if (this.refs.selectedYearButton === undefined) {
+      return;
+    }
 
     const container = ReactDOM.findDOMNode(this);
     const yearButtonNode = ReactDOM.findDOMNode(this.refs.selectedYearButton);
@@ -69,16 +86,22 @@ class CalendarYear extends Component {
   }
 
   handleTouchTapYear = (event, year) => {
-    if (this.props.onTouchTapYear) this.props.onTouchTapYear(event, year);
+    if (this.props.onTouchTapYear) {
+      this.props.onTouchTapYear(event, year);
+    }
   };
 
   render() {
-    const years = this.getYears();
-    const backgroundColor = this.context.muiTheme.datePicker.calendarYearBackgroundColor;
-    const {prepareStyles} = this.context.muiTheme;
+    const {
+      prepareStyles,
+      datePicker: {
+        calendarYearBackgroundColor,
+      },
+    } = this.context.muiTheme;
+
     const styles = {
       root: {
-        backgroundColor: backgroundColor,
+        backgroundColor: calendarYearBackgroundColor,
         height: 'inherit',
         lineHeight: '35px',
         overflowX: 'hidden',
@@ -96,7 +119,7 @@ class CalendarYear extends Component {
     return (
       <div style={prepareStyles(styles.root)}>
         <div style={prepareStyles(styles.child)}>
-          {years}
+          {this.getYears()}
         </div>
       </div>
     );

src/DatePicker/CalendarYear.spec.js

@@ -0,0 +1,35 @@
+/* eslint-env mocha */
+
+import React from 'react';
+import {shallow} from 'enzyme';
+import {assert} from 'chai';
+import getMuiTheme from '../styles/getMuiTheme';
+import {dateTimeFormat, addYears} from './dateUtils';
+import CalendarYear from './CalendarYear';
+import YearButton from './YearButton';
+
+describe('<CalendarYear />', () => {
+  const muiTheme = getMuiTheme();
+  const shallowWithContext = (node) => shallow(node, {context: {muiTheme}});
+
+  describe('i18n', () => {
+    it('should format the year correctly', () => {
+      const date = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT
+      const minDate = addYears(date, -100);
+      const maxDate = addYears(date, 100);
+
+      const wrapper = shallowWithContext(
+        <CalendarYear
+          selectedDate={date}
+          DateTimeFormat={dateTimeFormat}
+          minDate={minDate}
+          maxDate={maxDate}
+          locale="en-US"
+        />
+      );
+
+      assert.strictEqual(wrapper.find(YearButton).length, 201);
+      assert.strictEqual(wrapper.find(YearButton).at(0).props().children, '1915');
+    });
+  });
+});