diff --git a/components/datepicker/demo/locale.md b/components/datepicker/demo/locale.md new file mode 100644 index 0000000000000000000000000000000000000000..2bc4cb33361be83fb17934451de2788ec9bd46ae --- /dev/null +++ b/components/datepicker/demo/locale.md @@ -0,0 +1,34 @@ +# 国际化 + +- order: 9 + +通过 `locale` 配置时区、语言等。 + +--- + +````jsx +var Datepicker = antd.Datepicker; + +var App = React.createClass({ + getInitialState() { + return { + locale: { + timezoneOffset: 0 * 60, + firstDayOfWeek: 0, + minimalDaysInFirstWeek: 1, + lang: { + today: 'Today', + now: 'Now', + ok: 'Ok' + } + } + }; + }, + render() { + return ; + } +}); + +ReactDOM.render(, document.getElementById('components-datepicker-demo-locale')); +```` + diff --git a/components/datepicker/index.jsx b/components/datepicker/index.jsx index 18ac7a9245d3f28f77b667bed23eff0773361fde..8fdf798d1f8f62b7c7ec8f30a810ac51d7506019 100644 --- a/components/datepicker/index.jsx +++ b/components/datepicker/index.jsx @@ -3,20 +3,30 @@ import Calendar from 'rc-calendar'; import MonthCalendar from 'rc-calendar/lib/MonthCalendar'; import Datepicker from 'rc-calendar/lib/Picker'; import GregorianCalendar from 'gregorian-calendar'; -import zhCn from 'gregorian-calendar/lib/locale/zh-cn'; +import defaultLocale from './locale'; import CalendarLocale from 'rc-calendar/lib/locale/zh-cn'; import DateTimeFormat from 'gregorian-calendar-format'; +import objectAssign from 'object-assign'; -// 和顶部文案保持一致 -import Locale from 'gregorian-calendar-format/lib/locale/zh-cn'; -Locale.shortMonths = ['1月', '2月', '3月', '4月', '5月', '6月', - '7月', '8月', '9月', '10月', '11月', '12月']; - -// 以下两行代码 -// 给没有初始值的日期选择框提供本地化信息 -// 否则会以周日开始排 -let defaultCalendarValue = new GregorianCalendar(zhCn); -defaultCalendarValue.setTime(Date.now()); +// 转换 locale 为 rc-calender 接收的格式 +function getCalendarLocale(locale) { + locale.format = locale.format || {}; + [ + 'eras', + 'months', + 'shortMonths', + 'weekdays', + 'shortWeekdays', + 'veryShortWeekdays', + 'ampms', + 'datePatterns', + 'timePatterns', + 'dateTimePattern' + ].forEach(function(key) { + locale.format[key] = locale[key]; + }); + return locale; +} function createPicker(TheCalendar) { return React.createClass({ @@ -25,10 +35,10 @@ function createPicker(TheCalendar) { format: 'yyyy-MM-dd', placeholder: '请选择日期', transitionName: 'slide-up', - onSelect: null, //向前兼容 calendarStyle: {}, + onSelect: null, // 向前兼容 onChange() {}, // onChange 可用于 Validator - onOk() {} + locale: {} }; }, getInitialState() { @@ -43,6 +53,12 @@ function createPicker(TheCalendar) { }); } }, + getLocale() { + // 统一合并为完整的 Locale + let locale = objectAssign({}, defaultLocale, this.props.locale); + locale.lang = objectAssign({}, defaultLocale.lang, this.props.locale.lang); + return locale; + }, getFormatter() { const formats = this.formats = this.formats || {}; const format = this.props.format; @@ -55,9 +71,9 @@ function createPicker(TheCalendar) { parseDateFromValue(value) { if (value) { if (typeof value === 'string') { - return new DateTimeFormat(this.props.format).parse(value, zhCn); + return new DateTimeFormat(this.props.format).parse(value, this.getLocale()); } else if (value instanceof Date) { - let date = new GregorianCalendar(zhCn); + let date = new GregorianCalendar(this.getLocale()); date.setTime(value); return date; } @@ -76,11 +92,16 @@ function createPicker(TheCalendar) { this.props.onChange(timeValue); }, render() { + // 以下两行代码 + // 给没有初始值的日期选择框提供本地化信息 + // 否则会以周日开始排 + let defaultCalendarValue = new GregorianCalendar(this.getLocale()); + defaultCalendarValue.setTime(Date.now()); const calendar = ( input { outline: none;