diff --git a/examples/basic/basic.js b/examples/basic/basic.js
index fea8700b..0c9badf4 100644
--- a/examples/basic/basic.js
+++ b/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 {
{''}
+
+
+
+
Language:
+
+
+
+
+
);
}
+
+ _handleLocaleChange = (event) => {
+ this.setState({locale: event.target.value});
+ }
+
+ _handleDateTimeChange = (dateTime) => {
+ this.setState({value: dateTime});
+ }
}
diff --git a/src/DateTimeField.js b/src/DateTimeField.js
index 456ea5ad..fa2329da 100644
--- a/src/DateTimeField.js
+++ b/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}
diff --git a/src/DateTimePicker.js b/src/DateTimePicker.js
index 6c163675..635e81e3 100644
--- a/src/DateTimePicker.js
+++ b/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}
diff --git a/src/DateTimePickerDate.js b/src/DateTimePickerDate.js
index df3cb868..75fe9788 100644
--- a/src/DateTimePickerDate.js
+++ b/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 (
+ currentLocaleData.weekdaysMin(this.props.viewDate.weekday(i))
+ );
+ return weekdays.map(weekday => (
+ {weekday} |
+ ));
+ }
+
render() {
return (
@@ -76,25 +87,13 @@ export default class DateTimePickerDays extends Component {
‹ |
- {moment.months()[this.props.viewDate.month()]} {this.props.viewDate.year()} |
+ {this.props.viewDate.format(this.props.calendarFormat)} |
› |
- Su |
-
- Mo |
-
- Tu |
-
- We |
-
- Th |
-
- Fr |
-
- Sa |
+ {this.renderWeekdays()}
diff --git a/src/DateTimePickerMonths.js b/src/DateTimePickerMonths.js
index 26647e34..7482e55a 100644
--- a/src/DateTimePickerMonths.js
+++ b/src/DateTimePickerMonths.js
@@ -13,9 +13,9 @@ 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) {
@@ -23,7 +23,7 @@ export default class DateTimePickerMonths extends Component {
month: true,
"active": i === month && this.props.viewDate.year() === this.props.selectedDate.year()
};
- months.push({monthsShort[i]});
+ months.push({currentLocaleData.monthsShort(this.props.viewDate.month(i))});
i++;
}
return months;