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 (
+ {this.props.selectedDate.format("A")}
+ );
+ } 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()}
- {this.props.selectedDate.format("A")}