add locale support

src/DateTimeField.js

@@ -14,6 +14,7 @@ export default class DateTimeField extends Component {
     size: Constants.SIZE_MEDIUM,
     mode: Constants.MODE_DATETIME,
     zIndex: 999,
+    locale: moment.locale(),
     onChange: (x) => {
       console.log(x);
     }
@@ -23,11 +24,12 @@ export default class DateTimeField extends Component {
     if (this.props.inputFormat) { return this.props.inputFormat; }
     switch (this.props.mode) {
       case Constants.MODE_TIME:
-        return "h:mm A";
+        return moment.localeData(this.props.locale).longDateFormat('LT');
       case Constants.MODE_DATE:
-        return "MM/DD/YY";
+        return moment.localeData(this.props.locale).longDateFormat('L');
       default:
-        return "MM/DD/YY h:mm A";
+        return moment.localeData(this.props.locale).longDateFormat('L') + ' ' +
+            moment.localeData(this.props.locale).longDateFormat('LT');
     }
   }
 
@@ -49,7 +51,8 @@ export default class DateTimeField extends Component {
     viewMode: PropTypes.string,
     zIndex: PropTypes.number,
     size: PropTypes.oneOf([Constants.SIZE_SMALL, Constants.SIZE_MEDIUM, Constants.SIZE_LARGE]),
-    daysOfWeekDisabled: PropTypes.arrayOf(PropTypes.number)
+    daysOfWeekDisabled: PropTypes.arrayOf(PropTypes.number),
+    locale: PropTypes.string
   }
 
   state = {
@@ -63,7 +66,7 @@ export default class DateTimeField extends Component {
         left: -9999,
         zIndex: "9999 !important"
       },
-      viewDate: moment(this.props.dateTime, this.props.format, true).startOf("month"),
+      viewDate: moment(this.props.dateTime, this.props.format, true).startOf("month").locale(this.props.locale),
       selectedDate: moment(this.props.dateTime, this.props.format, true),
       inputValue: typeof this.props.defaultText !== "undefined" ? this.props.defaultText : moment(this.props.dateTime, this.props.format, true).format(this.resolvePropsInputFormat())
   }
@@ -76,7 +79,7 @@ export default class DateTimeField extends Component {
     }
 
     if (nextProps.dateTime !== this.props.dateTime && moment(nextProps.dateTime, nextProps.format, true).isValid()) {
-      state.viewDate = moment(nextProps.dateTime, nextProps.format, true).startOf("month");
+      state.viewDate = moment(nextProps.dateTime, nextProps.format, true).startOf("month").locale(this.props.locale);
       state.selectedDate = moment(nextProps.dateTime, nextProps.format, true);
       state.inputValue = moment(nextProps.dateTime, nextProps.format, true).format(nextProps.inputFormat ? nextProps.inputFormat : this.state.inputFormat);
     }
@@ -373,6 +376,7 @@ export default class DateTimeField extends Component {
                   viewMode={this.props.viewMode}
                   widgetClasses={this.state.widgetClasses}
                   widgetStyle={this.state.widgetStyle}
+                  locale={this.props.locale}
             />
             <div className={"input-group date " + this.size()} ref="datetimepicker">
               <input className="form-control" onChange={this.onChange} type="text" value={this.state.inputValue} {...this.props.inputProps}/>

src/DateTimePicker.js

@@ -61,6 +61,7 @@ export default class DateTimePicker extends Component {
               subtractYear={this.props.subtractYear}
               viewDate={this.props.viewDate}
               viewMode={this.props.viewMode}
+              locale={this.props.locale}
         />
       </li>
       );
@@ -82,6 +83,7 @@ export default class DateTimePicker extends Component {
               subtractMinute={this.props.subtractMinute}
               togglePeriod={this.props.togglePeriod}
               viewDate={this.props.viewDate}
+              locale={this.props.locale}
         />
       </li>
       );

src/DateTimePickerDate.js

@@ -92,6 +92,7 @@ export default class DateTimePickerDate extends Component {
             showToday={this.props.showToday}
             subtractMonth={this.props.subtractMonth}
             viewDate={this.props.viewDate}
+            locale={this.props.locale}
       />
       );
     } else {
@@ -109,6 +110,7 @@ export default class DateTimePickerDate extends Component {
             showYears={this.showYears}
             subtractYear={this.props.subtractYear}
             viewDate={this.props.viewDate}
+            locale={this.props.locale}
       />
       );
     } else {
@@ -125,6 +127,7 @@ export default class DateTimePickerDate extends Component {
             setViewYear={this.setViewYear}
             subtractDecade={this.props.subtractDecade}
             viewDate={this.props.viewDate}
+            locale={this.props.locale}
       />
       );
     } else {

src/DateTimePickerDays.js

@@ -22,6 +22,7 @@ export default class DateTimePickerDays extends Component {
 
   renderDays = () => {
     var cells, classes, days, html, month, nextMonth, prevMonth, minDate, maxDate, row, year;
+
     year = this.props.viewDate.year();
     month = this.props.viewDate.month();
     prevMonth = this.props.viewDate.clone().subtract(1, "months");
@@ -65,9 +66,23 @@ export default class DateTimePickerDays extends Component {
       }
       prevMonth.add(1, "d");
     }
+
     return html;
   }
 
+  renderDaysCaption() {
+    // because of moment doesn't have api to get list of weekdays in local object  (when we set locale locally)
+    // we have to back up locale get weekdays and restore it
+    let currentLocale = moment.locale();
+    moment.locale(this.props.locale);
+    let weekDays = moment.weekdaysMin(true);
+    moment.locale(currentLocale);
+
+    return weekDays.map(function(day, i) {
+      return <th key={i} className="dow">{day}</th>;
+    }).concat();
+  }
+
   render() {
     return (
     <div className="datepicker-days" style={{display: "block"}}>
@@ -76,25 +91,13 @@ export default class DateTimePickerDays extends Component {
             <tr>
               <th className="prev" onClick={this.props.subtractMonth}><span className="glyphicon glyphicon-chevron-left" /></th>
 
-              <th className="switch" colSpan="5" onClick={this.props.showMonths}>{moment.months()[this.props.viewDate.month()]} {this.props.viewDate.year()}</th>
+              <th className="switch" colSpan="5" onClick={this.props.showMonths}>{this.props.viewDate.format('MMMM')} {this.props.viewDate.year()}</th>
 
               <th className="next" onClick={this.props.addMonth}><span className="glyphicon glyphicon-chevron-right" /></th>
             </tr>
 
             <tr>
-              <th className="dow">Su</th>
-
-              <th className="dow">Mo</th>
-
-              <th className="dow">Tu</th>
-
-              <th className="dow">We</th>
-
-              <th className="dow">Th</th>
-
-              <th className="dow">Fr</th>
-
-              <th className="dow">Sa</th>
+              {this.renderDaysCaption()}
             </tr>
           </thead>
 

src/DateTimePickerMonths.js

@@ -15,7 +15,14 @@ export default class DateTimePickerMonths extends Component {
   renderMonths = () => {
     var classes, i, month, months, monthsShort;
     month = this.props.selectedDate.month();
+
+    // because of moment doesn't have api to get list of weekdays in local object  (when we set locale locally)
+    // we have to back up locale get weekdays and restore it
+    let currentLocale = moment.locale();
+    moment.locale(this.props.locale);
     monthsShort = moment.monthsShort();
+    moment.locale(currentLocale);
+
     i = 0;
     months = [];
     while (i < 12) {

src/DateTimePickerTime.js

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from "react";
+import moment from 'moment';
 import DateTimePickerMinutes from "./DateTimePickerMinutes";
 import DateTimePickerHours from "./DateTimePickerHours";
 import Constants from "./Constants.js";
@@ -57,6 +58,30 @@ export default class DateTimePickerTime extends Component {
     }
   }
 
+  renderPeriodBtn() {
+    // capital A - in moment js time format means AM - PM
+    if (this.getTimeFormat().indexOf('A') > -1) {
+      return (
+          <td><button className="btn btn-primary" onClick={this.props.togglePeriod} type="button">{this.props.selectedDate.format("A")}</button></td>
+      );
+    } else {
+      return '';
+    }
+  }
+
+  getHoursFormat() {
+    return this.getTimeFormat().split(':')[0];
+  }
+
+  getMinutesFormat() {
+    return this.getTimeFormat().split(':')[1];
+  }
+
+  getTimeFormat() {
+    return moment.localeData(this.props.locale).longDateFormat('LT');
+  }
+
+
   renderPicker = () => {
     if (!this.state.minutesDisplayed && !this.state.hoursDisplayed) {
       return (
@@ -74,15 +99,15 @@ export default class DateTimePickerTime extends Component {
             </tr>
 
             <tr>
-              <td><span className="timepicker-hour" onClick={this.showHours}>{this.props.selectedDate.format("h")}</span></td>
+              <td><span className="timepicker-hour" onClick={this.showHours}>{this.props.selectedDate.format(this.getHoursFormat())}</span></td>
 
               <td className="separator">:</td>
 
-              <td><span className="timepicker-minute" onClick={this.showMinutes}>{this.props.selectedDate.format("mm")}</span></td>
+              <td><span className="timepicker-minute" onClick={this.showMinutes}>{this.props.selectedDate.format(this.getMinutesFormat())}</span></td>
 
               <td className="separator"></td>
+              {this.renderPeriodBtn()}
 
-              <td><button className="btn btn-primary" onClick={this.props.togglePeriod} type="button">{this.props.selectedDate.format("A")}</button></td>
             </tr>
 
             <tr>