From 5c1ab0b8a1aa93573f004fc6868c63816b74f34c Mon Sep 17 00:00:00 2001 From: Syoudai Yokoyama Date: Tue, 18 Aug 2015 10:52:37 +0900 Subject: [PATCH 1/6] Use localized weekdays --- src/DateTimePickerDays.js | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/src/DateTimePickerDays.js b/src/DateTimePickerDays.js index 13caf3d3..bfb5b7cf 100644 --- a/src/DateTimePickerDays.js +++ b/src/DateTimePickerDays.js @@ -68,6 +68,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 => ( + {weekday} + )); + } + render() { return (
@@ -82,19 +92,7 @@ export default class DateTimePickerDays extends Component { - Su - - Mo - - Tu - - We - - Th - - Fr - - Sa + {this.renderWeekdays()} From 9702e4e44a1e4d5b5c14557bcac4741bbcafc420 Mon Sep 17 00:00:00 2001 From: Syoudai Yokoyama Date: Tue, 18 Aug 2015 11:44:49 +0900 Subject: [PATCH 2/6] Use localized month and year --- src/DateTimeField.js | 3 +++ src/DateTimePicker.js | 4 +++- src/DateTimePickerDate.js | 4 +++- src/DateTimePickerDays.js | 5 +++-- 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/DateTimeField.js b/src/DateTimeField.js index 456ea5ad..6b84e818 100644 --- a/src/DateTimeField.js +++ b/src/DateTimeField.js @@ -7,6 +7,7 @@ import Constants from "./Constants.js"; export default class DateTimeField extends Component { static defaultProps = { dateTime: moment().format("x"), + calendarFormat: "MMMMM YYYY", format: "x", showToday: true, viewMode: "days", @@ -33,6 +34,7 @@ export default class DateTimeField extends Component { dateTime: PropTypes.string, onChange: PropTypes.func, format: PropTypes.string, + calendarFormat: PropTypes.string, inputProps: PropTypes.object, inputFormat: PropTypes.string, defaultText: PropTypes.string, @@ -330,6 +332,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 ( ‹ - {moment.months()[this.props.viewDate.month()]} {this.props.viewDate.year()} + {this.props.viewDate.format(this.props.calendarFormat)} › From daa327b8d8fa70352dc55fbf6aba706eb84353f1 Mon Sep 17 00:00:00 2001 From: Syoudai Yokoyama Date: Tue, 18 Aug 2015 19:38:34 +0900 Subject: [PATCH 3/6] Use localized months --- src/DateTimePickerMonths.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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; From ecd7e5deee4bf822dbb4164e603bc94264b7ec4a Mon Sep 17 00:00:00 2001 From: Syoudai Yokoyama Date: Tue, 18 Aug 2015 17:10:53 +0900 Subject: [PATCH 4/6] Prevent that `mode' prop is ignored --- src/DateTimeField.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/DateTimeField.js b/src/DateTimeField.js index 6b84e818..7724265c 100644 --- a/src/DateTimeField.js +++ b/src/DateTimeField.js @@ -18,9 +18,10 @@ export default class DateTimeField extends Component { } } - resolvePropsInputFormat = () => { - if (this.props.inputFormat) { return this.props.inputFormat; } - switch (this.props.mode) { + 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: @@ -68,7 +69,7 @@ export default class DateTimeField extends Component { 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) + inputValue: moment(nextProps.dateTime, nextProps.format, true).format(this.resolvePropsInputFormat(nextProps)) }); } if (nextProps.inputFormat !== this.props.inputFormat) { From 4941e78b53bb6257f6a82a6b56053d9cb0663c84 Mon Sep 17 00:00:00 2001 From: Syoudai Yokoyama Date: Tue, 18 Aug 2015 13:07:26 +0900 Subject: [PATCH 5/6] Support i18n --- src/DateTimeField.js | 32 +++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/src/DateTimeField.js b/src/DateTimeField.js index 7724265c..fa2329da 100644 --- a/src/DateTimeField.js +++ b/src/DateTimeField.js @@ -7,8 +7,9 @@ import Constants from "./Constants.js"; export default class DateTimeField extends Component { static defaultProps = { dateTime: moment().format("x"), - calendarFormat: "MMMMM YYYY", + calendarFormat: "MMMM YYYY", format: "x", + locale: "en", showToday: true, viewMode: "days", daysOfWeekDisabled: [], @@ -18,6 +19,10 @@ export default class DateTimeField extends Component { } } + 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; } @@ -36,6 +41,7 @@ export default class DateTimeField extends Component { onChange: PropTypes.func, format: PropTypes.string, calendarFormat: PropTypes.string, + locale: PropTypes.string, inputProps: PropTypes.object, inputFormat: PropTypes.string, defaultText: PropTypes.string, @@ -59,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(this.resolvePropsInputFormat(nextProps)) + 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) { @@ -83,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) => { From e1a51df73859cb75041a3ad0ce6af754c1fe5946 Mon Sep 17 00:00:00 2001 From: Syoudai Yokoyama Date: Tue, 18 Aug 2015 17:13:54 +0900 Subject: [PATCH 6/6] Add an exmaple of i18n --- examples/basic/basic.js | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) 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}); + } }