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 {
 {''} 
+
+
+ i18n + +
 {''} 
+
+
+
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;