Add support for i18n

examples/basic/basic.js

@@ -3,6 +3,9 @@ import DateTimeField from "react-bootstrap-datetimepicker";
 import moment from "moment";
 
 class Basic extends Component {
+  state = {
+    locale: "en"
+  }
 
 	render() {
     return (
@@ -78,9 +81,39 @@ class Basic extends Component {
                   <pre> {'<DateTimeField mode="date" />'} </pre>
               </div>
             </div>
+            <div className="row">
+              <div className="col-xs-12">
+                  i18n
+                  <DateTimeField
+                      mode="date"
+                      dateTime={this.state.value}
+                      locale={this.state.locale}
+                      onChange={this._handleDateTimeChange}
+                      />
+                  <pre> {'<DateTimeField mode="date" locale="' + this.state.locale + '"/>'} </pre>
+              </div>
+              <div>
+                 <div className="col-xs-2">Language:</div>
+                 <div className="col-xs-10">
+                     <select id="locale" value={this.state.locale} onChange={this._handleLocaleChange} className="form-control">
+                         <option value="en">English(en)</option>
+                         <option value="fr">French(fr)</option>
+                         <option value="ja">Japan(ja)</option>
+                     </select>
+                 </div>
+              </div>
+            </div>
           </div>
       );
    }
+
+   _handleLocaleChange = (event) => {
+     this.setState({locale: event.target.value});
+   }
+
+   _handleDateTimeChange = (dateTime) => {
+     this.setState({value: dateTime});
+   }
 }
 
 

src/DateTimeField.js

@@ -7,7 +7,9 @@ import Constants from "./Constants.js";
 export default class DateTimeField extends Component {
   static defaultProps = {
     dateTime: moment().format("x"),
+    calendarFormat: "MMMM YYYY",
     format: "x",
+    locale: "en",
     showToday: true,
     viewMode: "days",
     daysOfWeekDisabled: [],
@@ -17,9 +19,14 @@ export default class DateTimeField extends Component {
     }
   }
 
-  resolvePropsInputFormat = () => {
-    if (this.props.inputFormat) { return this.props.inputFormat; }
-    switch (this.props.mode) {
+  newLocalizedMoment = (dateTime, format, strictParse) => {
+    return moment(dateTime, format, this.props.locale, strictParse);
+  }
+
+  resolvePropsInputFormat = (nextProps) => {
+    let props = nextProps || this.props;
+    if (props.inputFormat) { return this.props.inputFormat; }
+    switch (props.mode) {
       case Constants.MODE_TIME:
         return "h:mm A";
       case Constants.MODE_DATE:
@@ -33,6 +40,8 @@ export default class DateTimeField extends Component {
     dateTime: PropTypes.string,
     onChange: PropTypes.func,
     format: PropTypes.string,
+    calendarFormat: PropTypes.string,
+    locale: PropTypes.string,
     inputProps: PropTypes.object,
     inputFormat: PropTypes.string,
     defaultText: PropTypes.string,
@@ -56,17 +65,17 @@ export default class DateTimeField extends Component {
         left: -9999,
         zIndex: "9999 !important"
       },
-      viewDate: moment(this.props.dateTime, this.props.format, true).startOf("month"),
-      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())
+      viewDate: this.newLocalizedMoment(this.props.dateTime, this.props.format, true).startOf("month"),
+      selectedDate: this.newLocalizedMoment(this.props.dateTime, this.props.format, true),
+      inputValue: typeof this.props.defaultText !== "undefined" ? this.props.defaultText : this.newLocalizedMoment(this.props.dateTime, this.props.format, true).format(this.resolvePropsInputFormat())
   }
 
   componentWillReceiveProps = (nextProps) => {
-    if (moment(nextProps.dateTime, nextProps.format, true).isValid()) {
+    if (moment(nextProps.dateTime, nextProps.format, nextProps.locale, true).isValid()) {
       return this.setState({
-        viewDate: moment(nextProps.dateTime, nextProps.format, true).startOf("month"),
-        selectedDate: moment(nextProps.dateTime, nextProps.format, true),
-        inputValue: moment(nextProps.dateTime, nextProps.format, true).format(nextProps.inputFormat)
+        viewDate: moment(nextProps.dateTime, nextProps.format, nextProps.locale, true).startOf("month"),
+        selectedDate: moment(nextProps.dateTime, nextProps.format, nextProps.locale, true),
+        inputValue: moment(nextProps.dateTime, nextProps.format, nextProps.locale, true).format(this.resolvePropsInputFormat(nextProps))
       });
     }
     if (nextProps.inputFormat !== this.props.inputFormat) {
@@ -80,23 +89,23 @@ export default class DateTimeField extends Component {
 
   onChange = (event) => {
     const value = event.target == null ? event : event.target.value;
-    if (moment(value, this.state.inputFormat, true).isValid()) {
+    if (this.newLocalizedMoment(value, this.state.inputFormat, true).isValid()) {
       this.setState({
-        selectedDate: moment(value, this.state.inputFormat, true),
-        viewDate: moment(value, this.state.inputFormat, true).startOf("month")
+        selectedDate: this.newLocalizedMoment(value, this.state.inputFormat, true),
+        viewDate: this.newLocalizedMoment(value, this.state.inputFormat, true).startOf("month")
       });
     }
 
     return this.setState({
       inputValue: value
     }, function() {
-      return this.props.onChange(moment(this.state.inputValue, this.state.inputFormat, true).format(this.props.format));
+      return this.props.onChange(this.newLocalizedMoment(this.state.inputValue, this.state.inputFormat, true).format(this.props.format));
     });
 
   }
 
   getValue = () => {
-    return moment(this.state.inputValue, this.props.inputFormat, true).format(this.props.format);
+    return this.newLocalizedMoment(this.state.inputValue, this.props.inputFormat, true).format(this.props.format);
   }
 
   setSelectedDate = (e) => {
@@ -330,6 +339,7 @@ export default class DateTimeField extends Component {
                   addMinute={this.addMinute}
                   addMonth={this.addMonth}
                   addYear={this.addYear}
+                  calendarFormat={this.props.calendarFormat}
                   daysOfWeekDisabled={this.props.daysOfWeekDisabled}
                   maxDate={this.props.maxDate}
                   minDate={this.props.minDate}

src/DateTimePicker.js

@@ -38,7 +38,8 @@ export default class DateTimePicker extends Component {
     widgetStyle: PropTypes.object,
     togglePicker: PropTypes.func,
     setSelectedHour: PropTypes.func,
-    setSelectedMinute: PropTypes.func
+    setSelectedMinute: PropTypes.func,
+    calendarFormat: PropTypes.string
   }
 
   renderDatePicker = () => {
@@ -49,6 +50,7 @@ export default class DateTimePicker extends Component {
               addDecade={this.props.addDecade}
               addMonth={this.props.addMonth}
               addYear={this.props.addYear}
+              calendarFormat={this.props.calendarFormat}
               daysOfWeekDisabled={this.props.daysOfWeekDisabled}
               maxDate={this.props.maxDate}
               minDate={this.props.minDate}

src/DateTimePickerDate.js

@@ -23,7 +23,8 @@ export default class DateTimePickerDate extends Component {
     addDecade: PropTypes.func.isRequired,
     subtractDecade: PropTypes.func.isRequired,
     minDate: PropTypes.object,
-    maxDate: PropTypes.object
+    maxDate: PropTypes.object,
+    calendarFormat: PropTypes.string
   }
 
   constructor(props) {
@@ -83,6 +84,7 @@ export default class DateTimePickerDate extends Component {
       return (
       <DateTimePickerDays
             addMonth={this.props.addMonth}
+            calendarFormat={this.props.calendarFormat}
             daysOfWeekDisabled={this.props.daysOfWeekDisabled}
             maxDate={this.props.maxDate}
             minDate={this.props.minDate}

src/DateTimePickerDays.js

@@ -13,7 +13,8 @@ export default class DateTimePickerDays extends Component {
     setSelectedDate: PropTypes.func.isRequired,
     showMonths: PropTypes.func.isRequired,
     minDate: PropTypes.object,
-    maxDate: PropTypes.object
+    maxDate: PropTypes.object,
+    calendarFormat: PropTypes.string
   }
 
   static defaultProps = {
@@ -68,6 +69,16 @@ export default class DateTimePickerDays extends Component {
     return html;
   }
 
+  renderWeekdays() {
+    let currentLocaleData = moment.localeData(this.props.viewDate.locale());
+    let weekdays = [0,1,2,3,4,5,6].map(i =>
+      currentLocaleData.weekdaysMin(this.props.viewDate.weekday(i))
+    );
+    return weekdays.map(weekday => (
+        <th className="dow">{weekday}</th>
+    ));
+  }
+
   render() {
     return (
     <div className="datepicker-days" style={{display: "block"}}>
@@ -76,25 +87,13 @@ export default class DateTimePickerDays extends Component {
             <tr>
               <th className="prev" onClick={this.props.subtractMonth}>‹</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(this.props.calendarFormat)}</th>
 
               <th className="next" onClick={this.props.addMonth}>›</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.renderWeekdays()}
             </tr>
           </thead>
 

src/DateTimePickerMonths.js

@@ -13,17 +13,17 @@ export default class DateTimePickerMonths extends Component {
   }
 
   renderMonths = () => {
+    let currentLocaleData = moment.localeData(this.props.viewDate.locale());
     var classes, i, month, months, monthsShort;
     month = this.props.selectedDate.month();
-    monthsShort = moment.monthsShort();
     i = 0;
     months = [];
     while (i < 12) {
       classes = {
         month: true,
         "active": i === month && this.props.viewDate.year() === this.props.selectedDate.year()
       };
-      months.push(<span key={i} className={classnames(classes)} onClick={this.props.setViewMonth}>{monthsShort[i]}</span>);
+      months.push(<span key={i} className={classnames(classes)} onClick={this.props.setViewMonth}>{currentLocaleData.monthsShort(this.props.viewDate.month(i))}</span>);
       i++;
     }
     return months;