From f8122309fa2e7139da4cb8b619de654968b27820 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 23 Oct 2015 17:57:02 +0800
Subject: [PATCH] Add locale support for datepicker, #424

---
 components/datepicker/demo/locale.md    | 34 ++++++++++++++++
 components/datepicker/index.jsx         | 53 +++++++++++++++++--------
 components/datepicker/locale.js         | 49 +++++++++++++++++++++++
 style/components/datepicker/Picker.less |  1 +
 4 files changed, 121 insertions(+), 16 deletions(-)
 create mode 100644 components/datepicker/demo/locale.md
 create mode 100644 components/datepicker/locale.js

diff --git a/components/datepicker/demo/locale.md b/components/datepicker/demo/locale.md
new file mode 100644
index 0000000000..2bc4cb3336
--- /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 <Datepicker showTime={true} locale={this.state.locale} />;
+  }
+});
+
+ReactDOM.render(<App />, document.getElementById('components-datepicker-demo-locale'));
+````
+
diff --git a/components/datepicker/index.jsx b/components/datepicker/index.jsx
index 18ac7a9245..8fdf798d1f 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 = (
         <TheCalendar
           style={this.props.calendarStyle}
           disabledDate={this.props.disabledDate}
-          locale={CalendarLocale}
+          locale={getCalendarLocale(this.getLocale().lang)}
           defaultValue={defaultCalendarValue}
           showTime={this.props.showTime}
           prefixCls="ant-calendar"
diff --git a/components/datepicker/locale.js b/components/datepicker/locale.js
new file mode 100644
index 0000000000..d8bad0e000
--- /dev/null
+++ b/components/datepicker/locale.js
@@ -0,0 +1,49 @@
+export default {
+  // https://github.com/yiminghe/gregorian-calendar/blob/90898382392b7d575a19aa18696a35fee81a756f/src/locale/zh-cn.js
+  timezoneOffset: 8 * 60,
+  firstDayOfWeek: 1,
+  minimalDaysInFirstWeek: 1,
+  lang: {
+    // https://github.com/react-component/calendar/blob/c92cc946f7dddf93d6edb5afdaecb4d72c5b75d6/src/locale/zh-cn.js
+    today: '今天',
+    now: '此刻',
+    ok: '确定',
+    clear: '清除',
+    previousMonth: '上个月 (翻页上键)',
+    nextMonth: '下个月 (翻页下键)',
+    monthSelect: '选择月份',
+    yearSelect: '选择年份',
+    decadeSelect: '选择年代',
+    hourInput: '上一小时(上方向键), 下一小时(下方向键)',
+    minuteInput: '上一分钟(上方向键), 下一分钟(下方向键)',
+    secondInput: '上一秒(上方向键), 下一小时(下方向键)',
+    hourPanelTitle: '选择小时',
+    minutePanelTitle: '选择分钟',
+    secondPanelTitle: '选择秒',
+    yearFormat: 'yyyy\'年\'',
+    monthFormat: 'M\'月\'',
+    dateFormat: 'yyyy\'年\'M\'月\'d\'日\'',
+    previousYear: '上一年 (Control键加左方向键)',
+    nextYear: '下一年 (Control键加右方向键)',
+    previousDecade: '上一年代',
+    nextDecade: '下一年代',
+    previousCentury: '上一世纪',
+    nextCentury: '下一世纪',
+
+    // https://github.com/yiminghe/gregorian-calendar-format/blob/d2f2b1281bfc728dd550194a29ce53fca4266327/lib/locale/zh-cn.js
+    eras: ['公元前', '公元'],
+    months: ['一月', '二月', '三月', '四月', '五月', '六月',
+      '七月', '八月', '九月', '十月', '十一月', '十二月'],
+    shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月',
+      '七月', '八月', '九月', '十月', '十一月', '十二月'],
+    weekdays: ['星期天', '星期一', '星期二', '星期三', '星期四',
+      '星期五', '星期六'],
+    shortWeekdays: ['周日', '周一', '周二', '周三', '周四', '周五',
+      '周六'],
+    veryShortWeekdays: ['日', '一', '二', '三', '四', '五', '六'],
+    ampms: ['上午', '下午'],
+    datePatterns: ['yyyy\'年\'M\'月\'d\'日\' EEEE', 'yyyy\'年\'M\'月\'d\'日\'', 'yyyy-M-d', 'yy-M-d'],
+    timePatterns: ['ahh\'时\'mm\'分\'ss\'秒\' \'GMT\'Z', 'ahh\'时\'mm\'分\'ss\'秒\'', 'H:mm:ss', 'ah:mm'],
+    dateTimePattern: '{date} {time}'
+  }
+};
diff --git a/style/components/datepicker/Picker.less b/style/components/datepicker/Picker.less
index 3ffc8aa559..b697c38f81 100644
--- a/style/components/datepicker/Picker.less
+++ b/style/components/datepicker/Picker.less
@@ -12,6 +12,7 @@
 .@{calendar-prefix-cls}-picker {
   position: relative;
   display: inline-block;
+  outline: none;
 
   > input {
     outline: none;
-- 
GitLab