deps: hello moment (ant-design#2887)

* deps: upgrade TimePicker * deps: upgrade DatePicker * deps: upgrade Calendar * fix: moment should work with LocaleProvider * feat: update API of TimePicker * feat: update Calendar's APIs * feat: update DatePicker's APIs * doc: update demo * revert: add dateString and timeString and so on * feat: add Calendar[defaultValue] * feat: add defaultPickerValue * docs: update docs about date picker * feat: set moment locale to zh-cn automatically
ithanshui · Sep 9, 2016 · 4026221 · 4026221
1 parent 4b9d63d
commit 4026221
Show file tree

Hide file tree

Showing 44 changed files with 321 additions and 359 deletions.
diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx
@@ -1,5 +1,5 @@
+import React from 'react';
 import { PropTypes } from 'react';
-import * as React from 'react';
 import { PREFIX_CLS } from './Constants';
 import Select from '../select';
 import { Group, Button } from '../radio';
@@ -64,9 +64,19 @@ export default class Header extends React.Component<HeaderProps, any> {
     );
   }
 
-  getMonthSelectElement(month) {
+  getMonthsLocale(value) {
+    const current = value.clone();
+    const localeData = value.localeData();
+    const months = [];
+    for (let i = 0; i < 12; i++) {
+      current.month(i);
+      months.push(localeData.monthsShort(current));
+    }
+    return months;
+  }
+
+  getMonthSelectElement(month, months) {
     const props = this.props;
-    const months = props.locale.format.months;
     const { prefixCls, fullscreen } = props;
     const options = [];
 
@@ -89,13 +99,13 @@ export default class Header extends React.Component<HeaderProps, any> {
 
   onYearChange = (year) => {
     const newValue = this.props.value.clone();
-    newValue.setYear(parseInt(year, 10));
+    newValue.year(parseInt(year, 10));
     this.props.onValueChange(newValue);
   }
 
   onMonthChange = (month) => {
     const newValue = this.props.value.clone();
-    newValue.setMonth(parseInt(month, 10));
+    newValue.month(parseInt(month, 10));
     this.props.onValueChange(newValue);
   }
 
@@ -105,8 +115,9 @@ export default class Header extends React.Component<HeaderProps, any> {
 
   render() {
     const { type, value, prefixCls, locale, fullscreen } = this.props;
-    const yearSelect = this.getYearSelectElement(value.getYear());
-    const monthSelect = type === 'date' ? this.getMonthSelectElement(value.getMonth()) : null;
+    const yearSelect = this.getYearSelectElement(value.year());
+    const monthSelect = type === 'date' ?
+      this.getMonthSelectElement(value.month(), this.getMonthsLocale(value)) : null;
     const size = (fullscreen ? 'default' : 'small') as any;
     const typeSwitch = (
       <Group onChange={this.onTypeChange} value={type} size={size}>

diff --git a/components/calendar/demo/basic.md b/components/calendar/demo/basic.md
@@ -1,6 +1,6 @@
 ---
 order: 0
-title:	
+title:
   zh-CN: 基本
   en-US: Basic
 ---

diff --git a/components/calendar/demo/custom-render.md b/components/calendar/demo/custom-render.md
@@ -1,6 +1,6 @@
 ---
 order: 1
-title: 
+title:
   zh-CN: 自定义渲染
   en-US: Custom Render
 ---
@@ -15,17 +15,18 @@ This component can be rendered by using `dateCellRender` and `monthCellRender` w
 
 ````jsx
 import { Calendar } from 'antd';
+import moment from 'moment';
 
 function dateCellRender(value) {
-  return <div>自定义日数据 {value.getDayOfMonth()}</div>;
+  return <div>自定义日数据 {value.date()}</div>;
 }
 
 function monthCellRender(value) {
-  return <div>自定义月数据 {value.getMonth()}</div>;
+  return <div>自定义月数据 {value.month()}</div>;
 }
 
 ReactDOM.render(
-  <Calendar defaultValue={new Date('2010-10-10')}
+  <Calendar defaultValue={moment('2010-10-10', 'YYYY-MM-DD')}
     dateCellRender={dateCellRender} monthCellRender={monthCellRender}
   />
 , mountNode);

diff --git a/components/calendar/demo/locale.md b/components/calendar/demo/locale.md
@@ -7,21 +7,24 @@ title:
 
 ## zh-CN
 
-通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN
+通过 `locale` 配置语言, 默认支持 en_US, zh_CN
 
 ## en-US
 
-To set the properties like time zone, language and etc. en_US, zh_CN are supported by default.
+To set the language. en_US, zh_CN are supported by default.
 
 ````jsx
 import { Calendar } from 'antd';
 import enUS from 'antd/lib/calendar/locale/en_US';
+import moment from 'moment';
+// It's recommended to set moment locale globally, otherwise, you need to set it by `value` or `defaultValue`
+// moment.locale('en');
 
 function onPanelChange(value, mode) {
   console.log(value, mode);
 }
 
 ReactDOM.render(
-  <Calendar onPanelChange={onPanelChange} locale={enUS} />
+  <Calendar defaultValue={moment().locale('en')} onPanelChange={onPanelChange} locale={enUS} />
 , mountNode);
 ````
diff --git a/components/calendar/demo/notice-calendar.md b/components/calendar/demo/notice-calendar.md
@@ -18,7 +18,7 @@ import { Calendar } from 'antd';
 
 function getListData(value) {
   let listData;
-  switch (value.getDayOfMonth()) {
+  switch (value.date()) {
     case 8:
       listData = [
         { type: 'warning', content: '这里是警告事项.' },
@@ -61,7 +61,7 @@ function dateCellRender(value) {
 }
 
 function getMonthData(value) {
-  if (value.getMonth() === 8) {
+  if (value.month() === 8) {
     return 1394;
   }
 }

diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md
@@ -23,11 +23,11 @@ When data is in the form of date, such as schedule, timetable, prices calendar,
 
 | Property         | Description           | Type     | Default       |
 |--------------|----------------|----------|--------------|
-| value        | set date | Date     | current date     |
-| defaultValue | set default date | Date     | current date     |
+| value        | set date | [moment](http://momentjs.com/) | current date     |
+| defaultValue | set default date | [moment](http://momentjs.com/) | default date     |
 | mode         | can be set to month or year | string | month  |
-| fullscreen   | to set whether full-screen display   | bool     | true         |
-| dateCellRender     | to set the way of renderer the date cell| function([GregorianCalendar](https://github.com/yiminghe/gregorian-calendar/))| -           |
-| monthCellRender    | to set the way of renderer the month cell  | function([GregorianCalendar](https://github.com/yiminghe/gregorian-calendar/))   | -  |
-| locale       | set locale | object   | [defualt](https://github.com/ant-design/ant-design/issues/424)  |
-| onPanelChange| the callback when panel change | function(date, mode) | - |
+| fullscreen   | to set whether full-screen display   | boolean     | true         |
+| dateCellRender     | to set the way of renderer the date cell | function(date: moment): ReactNode | - |
+| monthCellRender    | to set the way of renderer the month cell | function(date: moment): ReactNode | - |
+| locale       | set locale | Object   | [defualt](https://github.com/ant-design/ant-design/issues/424)  |
+| onPanelChange| the callback when panel change | function(date: moment, mode: string) | - |
diff --git a/components/calendar/index.tsx b/components/calendar/index.tsx
@@ -1,8 +1,8 @@
+import React from 'react';
 import { PropTypes } from 'react';
-import * as React from 'react';
-import GregorianCalendar from 'gregorian-calendar';
-import defaultLocale from './locale/zh_CN';
+import moment from 'moment';
 import FullCalendar from 'rc-calendar/lib/FullCalendar';
+import defaultLocale from './locale/zh_CN';
 import { PREFIX_CLS } from './Constants';
 import Header from './Header';
 import assign from 'object-assign';
@@ -25,15 +25,15 @@ interface CalendarContext {
 export interface CalendarProps {
   prefixCls?: string;
   className?: string;
-  value?: Date;
-  defaultValue?: Date;
+  value?: moment.Moment;
+  defaultValue?: moment.Moment;
   mode?: 'month' | 'year';
   fullscreen?: boolean;
-  dateCellRender?: (date) => React.ReactNode;
-  monthCellRender?: (month) => React.ReactNode;
+  dateCellRender?: (date: moment.Moment) => React.ReactNode;
+  monthCellRender?: (date: moment.Moment) => React.ReactNode;
   locale?: any;
   style?: React.CSSProperties;
-  onPanelChange?: (date: Date, mode: string) => void;
+  onPanelChange?: (date: moment.Moment, mode: string) => void;
 }
 
 export default class Calendar extends React.Component<CalendarProps, any> {
@@ -56,7 +56,7 @@ export default class Calendar extends React.Component<CalendarProps, any> {
     className: PropTypes.string,
     style: PropTypes.object,
     onPanelChange: PropTypes.func,
-    value: PropTypes.instanceOf(Date),
+    value: PropTypes.object,
   };
 
   static contextTypes = {
@@ -68,29 +68,23 @@ export default class Calendar extends React.Component<CalendarProps, any> {
   constructor(props) {
     super(props);
     this.state = {
-      value: this.parseDateFromValue(props.value || new Date()),
+      value: props.value || props.defaultValue || moment(),
       mode: props.mode,
     };
   }
 
-  parseDateFromValue(value) {
-    const date = new GregorianCalendar(this.getLocale());
-    date.setTime(+value);
-    return date;
-  }
-
   componentWillReceiveProps(nextProps) {
     if ('value' in nextProps) {
       this.setState({
-        value: this.parseDateFromValue(nextProps.value),
+        value: nextProps.value,
       });
     }
   }
 
   getLocale = () => {
     const props = this.props;
-    let locale = defaultLocale;
     const context = this.context;
+    let locale = defaultLocale;
     if (context && context.antLocale && context.antLocale.Calendar) {
       locale = context.antLocale.Calendar;
     }
@@ -100,13 +94,12 @@ export default class Calendar extends React.Component<CalendarProps, any> {
     return result;
   }
 
-  monthCellRender = (value, locale) => {
+  monthCellRender = (value) => {
     const prefixCls = this.props.prefixCls;
-    const month = value.getMonth();
     return (
       <div className={`${prefixCls}-month`}>
         <div className={`${prefixCls}-value`}>
-          {locale.format.shortMonths[month]}
+          {value.localeData().monthsShort(value)}
         </div>
         <div className={`${prefixCls}-content`}>
           {this.props.monthCellRender(value)}
@@ -120,7 +113,7 @@ export default class Calendar extends React.Component<CalendarProps, any> {
     return (
       <div className={`${prefixCls}-date`}>
         <div className={`${prefixCls}-value`}>
-          {zerofixed(value.getDayOfMonth())}
+          {zerofixed(value.date())}
         </div>
         <div className={`${prefixCls}-content`}>
           {this.props.dateCellRender(value)}

diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md
@@ -25,11 +25,11 @@ english: Calendar
 
 | 参数         | 说明           | 类型     | 默认值       |
 |--------------|----------------|----------|--------------|
-| value        | 展示日期       | Date     | 当前日期     |
-| defaultValue | 默认展示日期   | Date     | 当前日期     |
+| value        | 展示日期       | [moment](http://momentjs.com/)     | 当前日期     |
+| defaultValue | 默认展示的日期  | [moment](http://momentjs.com/)     | 默认日期     |
 | mode         | 初始模式，`month/year` | string | month  |
-| fullscreen   | 是否全屏显示   | bool     | true         |
-| dateCellRender     | 自定义渲染日期单元格| function([GregorianCalendar](https://github.com/yiminghe/gregorian-calendar/))| 无           |
-| monthCellRender    | 自定义渲染月单元格  | function([GregorianCalendar](https://github.com/yiminghe/gregorian-calendar/))   | 无  |
-| locale       | 国际化配置     | object   | [默认配置](https://github.com/ant-design/ant-design/issues/424)  |
-| onPanelChange| 日期面板变化回调 | function(date, mode) | 无 |
+| fullscreen   | 是否全屏显示   | boolean     | true         |
+| dateCellRender     | 自定义渲染日期单元格| function(date: moment): ReactNode   | 无 |
+| monthCellRender    | 自定义渲染月单元格  | function(date: moment): ReactNode   | 无 |
+| locale       | 国际化配置     | Object   | [默认配置](https://github.com/ant-design/ant-design/issues/424)  |
+| onPanelChange| 日期面板变化回调 | function(date: moment, mode: string) | 无 |
diff --git a/components/date-picker/Calendar.tsx b/components/date-picker/Calendar.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
 import RcCalendar from 'rc-calendar';