diff --git a/src/DateTimeField.js b/src/DateTimeField.js index b4f26763..4434e84b 100644 --- a/src/DateTimeField.js +++ b/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} />
diff --git a/src/DateTimePicker.js b/src/DateTimePicker.js index e1b634a1..36e2e7cd 100644 --- a/src/DateTimePicker.js +++ b/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} /> ); @@ -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} /> ); diff --git a/src/DateTimePickerDate.js b/src/DateTimePickerDate.js index df3cb868..c006d811 100644 --- a/src/DateTimePickerDate.js +++ b/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 { diff --git a/src/DateTimePickerDays.js b/src/DateTimePickerDays.js index 11fae8ed..d1e856b6 100644 --- a/src/DateTimePickerDays.js +++ b/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 {day}; + }).concat(); + } + render() { return (
@@ -76,25 +91,13 @@ export default class DateTimePickerDays extends Component { - {moment.months()[this.props.viewDate.month()]} {this.props.viewDate.year()} + {this.props.viewDate.format('MMMM')} {this.props.viewDate.year()} - Su - - Mo - - Tu - - We - - Th - - Fr - - Sa + {this.renderDaysCaption()} diff --git a/src/DateTimePickerMonths.js b/src/DateTimePickerMonths.js index b09e1c07..7d66f764 100644 --- a/src/DateTimePickerMonths.js +++ b/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) { diff --git a/src/DateTimePickerTime.js b/src/DateTimePickerTime.js index 4a69666d..9044e023 100644 --- a/src/DateTimePickerTime.js +++ b/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 ( + + ); + } 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 { - {this.props.selectedDate.format("h")} + {this.props.selectedDate.format(this.getHoursFormat())} : - {this.props.selectedDate.format("mm")} + {this.props.selectedDate.format(this.getMinutesFormat())} + {this.renderPeriodBtn()} -