deps: hello moment (#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
2024-11-27 20:49:53 +08:00 · 2016-09-09 13:55:21 +08:00 · 2016-09-09 13:55:21 +08:00 · 4026221d45
commit 4026221d45
parent 4b9d63d08d
44 changed files with 319 additions and 357 deletions
--- 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}>
--- 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
 ---
--- 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);
--- 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);
 ````
--- 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;
  }
 }
--- 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) | - |
--- 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)}
--- 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) | 无 |
--- 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';

--- a/components/date-picker/RangePicker.tsx
+++ b/components/date-picker/RangePicker.tsx
@ -1,5 +1,5 @@
-import * as React from 'react';
-import GregorianCalendar from 'gregorian-calendar';
+import React from 'react';
+import moment from 'moment';
 import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
@ -12,24 +12,18 @@ export default class RangePicker extends React.Component<any, any> {

  constructor(props) {
    super(props);
-    const { value, defaultValue, parseDateFromValue } = this.props;
+    const { value, defaultValue } = this.props;
    const start = (value && value[0]) || defaultValue[0];
    const end = (value && value[1]) || defaultValue[1];
    this.state = {
-      value: [
-        parseDateFromValue(start),
-        parseDateFromValue(end),
-      ],
+      value: [start, end],
    };
  }

  componentWillReceiveProps(nextProps) {
    if ('value' in nextProps) {
-      const value = nextProps.value || [];
-      const start = nextProps.parseDateFromValue(value[0]);
-      const end = nextProps.parseDateFromValue(value[1]);
      this.setState({
-        value: [start, end],
+        value: nextProps.value || [],
      });
    }
  }
@ -46,21 +40,15 @@ export default class RangePicker extends React.Component<any, any> {
    if (!('value' in props)) {
      this.setState({ value });
    }
-    const startDate = value[0] ? new Date(value[0].getTime()) : null;
-    const endDate = value[1] ? new Date(value[1].getTime()) : null;
-    const startDateString = value[0] ? props.getFormatter().format(value[0]) : '';
-    const endDateString = value[1] ? props.getFormatter().format(value[1]) : '';
-    props.onChange([startDate, endDate], [startDateString, endDateString]);
+    props.onChange(value, [
+      (value[0] && value[0].format(props.format)) || '',
+      (value[1] && value[1].format(props.format)) || '',
+    ]);
  }

  render() {
    const props = this.props;
    const locale = props.locale;
-    // 以下两行代码
-    // 给没有初始值的日期选择框提供本地化信息
-    // 否则会以周日开始排
-    let defaultCalendarValue = new GregorianCalendar(locale);
-    defaultCalendarValue.setTime(Date.now());

    const { disabledDate, showTime, getCalendarContainer,
      transitionName, disabled, popupStyle, align, style, onOk } = this.props;
@ -92,16 +80,15 @@ export default class RangePicker extends React.Component<any, any> {

    const calendar = (
      <RangeCalendar
+        {...calendarHandler}
        prefixCls="ant-calendar"
-        formatter={props.getFormatter()}
        className={calendarClassName}
        timePicker={props.timePicker}
        disabledDate={disabledDate}
        dateInputPlaceholder={[startPlaceholder, endPlaceholder]}
        locale={locale.lang}
        onOk={onOk}
-        defaultValue={[defaultCalendarValue, defaultCalendarValue]}
-        {...calendarHandler}
+        defaultValue={props.defaultPickerValue || [moment(), moment()]}
      />
    );

@ -114,7 +101,7 @@ export default class RangePicker extends React.Component<any, any> {

    return (<span className={props.pickerClass} style={style}>
      <RcDatePicker
-        formatter={props.getFormatter()}
+        {...pickerChangeHandler}
        transitionName={transitionName}
        disabled={disabled}
        calendar={calendar}
@ -125,7 +112,6 @@ export default class RangePicker extends React.Component<any, any> {
        getCalendarContainer={getCalendarContainer}
        onOpen={props.toggleOpen}
        onClose={props.toggleOpen}
-        {...pickerChangeHandler}
      >
        {
          ({ value }) => {
@ -136,7 +122,7 @@ export default class RangePicker extends React.Component<any, any> {
                <input
                  disabled={disabled}
                  readOnly
-                  value={start ? props.getFormatter().format(start) : ''}
+                  value={(start && start.format(props.format)) || ''}
                  placeholder={startPlaceholder}
                  className="ant-calendar-range-picker-input"
                />
@ -144,7 +130,7 @@ export default class RangePicker extends React.Component<any, any> {
                <input
                  disabled={disabled}
                  readOnly
-                  value={end ? props.getFormatter().format(end) : ''}
+                  value={(end && end.format(props.format)) || ''}
                  placeholder={endPlaceholder}
                  className="ant-calendar-range-picker-input"
                />
--- a/components/date-picker/createPicker.tsx
+++ b/components/date-picker/createPicker.tsx
@ -1,14 +1,13 @@
-import * as React from 'react';
+import React from 'react';
+import moment from 'moment';
 import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
-import GregorianCalendar from 'gregorian-calendar';
 import classNames from 'classnames';
 import assign from 'object-assign';
 import Icon from '../icon';

 export interface PickerProps {
-  parseDateFromValue?: Function;
-  value?: string | Date;
+  value?: moment.Moment;
 }

 export default function createPicker(TheCalendar) {
@ -16,15 +15,16 @@ export default function createPicker(TheCalendar) {
  const CalenderWrapper = React.createClass({

    getInitialState() {
+      const props = this.props;
      return {
-        value: this.props.parseDateFromValue(this.props.value || this.props.defaultValue),
+        value: props.value || props.defaultValue,
      };
    },

    componentWillReceiveProps(nextProps: PickerProps) {
      if ('value' in nextProps) {
        this.setState({
-          value: nextProps.parseDateFromValue(nextProps.value),
+          value: nextProps.value,
        });
      }
    },
@ -41,18 +41,12 @@ export default function createPicker(TheCalendar) {
      if (!('value' in props)) {
        this.setState({ value });
      }
-      const timeValue = value ? new Date(value.getTime()) : null;
-      props.onChange(timeValue, value ? props.getFormatter().format(value) : '');
+      props.onChange(value, (value && value.format(props.format)) || '');
    },

    render() {
      const props = this.props;
      const locale = props.locale;
-      // 以下两行代码
-      // 给没有初始值的日期选择框提供本地化信息
-      // 否则会以周日开始排
-      let defaultCalendarValue = new GregorianCalendar(locale);
-      defaultCalendarValue.setTime(Date.now());

      const placeholder = ('placeholder' in props)
        ? props.placeholder : locale.lang.placeholder;
@ -85,12 +79,11 @@ export default function createPicker(TheCalendar) {

      const calendar = (
        <TheCalendar
-          formatter={props.getFormatter()}
          disabledDate={props.disabledDate}
          disabledTime={disabledTime}
          locale={locale.lang}
          timePicker={props.timePicker}
-          defaultValue={defaultCalendarValue}
+          defaultValue={props.defaultPickerValue || moment()}
          dateInputPlaceholder={placeholder}
          prefixCls="ant-calendar"
          className={calendarClassName}
@ -113,6 +106,7 @@ export default function createPicker(TheCalendar) {
      return (
        <span className={props.pickerClass} style={assign({}, pickerStyle, props.style)}>
          <RcDatePicker
+            {...pickerChangeHandler}
            transitionName={props.transitionName}
            disabled={props.disabled}
            calendar={calendar}
@ -124,25 +118,24 @@ export default function createPicker(TheCalendar) {
            open={props.open}
            onOpen={props.toggleOpen}
            onClose={props.toggleOpen}
-            {...pickerChangeHandler}
          >
            {
              ({ value }) => {
                return (
-                <span>
+                  <span>
                    <input
                      disabled={props.disabled}
                      readOnly
-                      value={value ? props.getFormatter().format(value) : ''}
+                      value={(value && value.format(props.format)) || ''}
                      placeholder={placeholder}
                      className={props.pickerInputClass}
                    />
                    {clearIcon}
                    <span className="ant-calendar-picker-icon" />
                  </span>
-                  );
-                }
+                );
              }
+            }
          </RcDatePicker>
        </span>
      );
--- a/components/date-picker/demo/basic.md
+++ b/components/date-picker/demo/basic.md
@ -16,8 +16,8 @@ The most basic usage.
 ````jsx
 import { DatePicker } from 'antd';

-function onChange(value, dateString) {
-  console.log(value, dateString);
+function onChange(date, dateString) {
+  console.log(date, dateString);
 }

 ReactDOM.render(<DatePicker onChange={onChange} />, mountNode);
--- a/components/date-picker/demo/disabled-date.md
+++ b/components/date-picker/demo/disabled-date.md
@ -22,7 +22,7 @@ import { DatePicker } from 'antd';

 const disabledDate = function (current) {
  // can not select days after today
-  return current && current.getTime() > Date.now();
+  return current && current.valueOf() > Date.now();
 };

 ReactDOM.render(
--- a/components/date-picker/demo/disabled.md
+++ b/components/date-picker/demo/disabled.md
@ -15,8 +15,9 @@ A disabled state of the `DatePicker`.

 ````jsx
 import { DatePicker } from 'antd';
+import moment from 'moment';

 ReactDOM.render(
-  <DatePicker defaultValue="2015-06-06" disabled />
+  <DatePicker defaultValue={moment('2015-06-06', 'YYYY-MM-DD')} disabled />
 , mountNode);
 ````
--- a/components/date-picker/demo/formatter.md
+++ b/components/date-picker/demo/formatter.md
@ -7,16 +7,18 @@ title:

 ## zh-CN

-使用 `format` 属性，可以自定义你需要的日期显示格式，如 `yyyy/MM/dd`。
+使用 `format` 属性，可以自定义你需要的日期显示格式，如 `YYYY/MM/DD`。

 ## en-US

-By using `format`, you can customize the format(such as `yyyy/MM/dd`) the date is displayed in. 
+By using `format`, you can customize the format(such as `YYYY/MM/DD`) the date is displayed in.

 ````jsx
 import { DatePicker } from 'antd';
+import moment from 'moment';

+const format = 'YYYY/MM/DD';
 ReactDOM.render(
-  <DatePicker defaultValue="2015/01/01" format="yyyy/MM/dd" />
+  <DatePicker defaultValue={moment('2015/01/01', format)} format={format} />
 , mountNode);
 ````
--- a/components/date-picker/demo/locale.md
+++ b/components/date-picker/demo/locale.md
@ -1,28 +1,40 @@
 ---
 order: 10
-title: 
+title:
  zh-CN: 国际化
  en-US: Locale
 ---

 ## zh-CN

-通过 `locale` 配置时区、语言等, 默认支持 `en_US`，`zh_CN`。不同版本带有不同的时区配置，如果所在时区与默认配置不同，需要自行设置。上面的 demo 就是在东八区使用 en_US 版本的例子。 
+通过 `locale` 语言, 默认支持 `en_US`，`zh_CN`。
+
+moment 会自动使用当前时区，如果需要使用别的时区，则需要自行设置，设置方法请参考 [moment 官方文档](http://momentjs.com/)。

 ## en-US

-Use locale to set the properties like time zone, language and etc. `en_US`, `zh_CN` are supported by default. There are different time zone configuration in different versions, you must set it by yourself if your time zone does not match the default setting. The example above is to show how to use the `en_US` version at GMT+8 time zone.
+Use locale to set the language. `en_US`, `zh_CN` are supported by default.
+
+moment will use your time zone automatically. If you want to set other time zone, please set it by yourself. [More](http://momentjs.com/)


 ````jsx
 import { DatePicker } from 'antd';
 import enUS from 'antd/lib/date-picker/locale/en_US';
+import moment from 'moment';
+// It's recommended to set moment locale and time zone globally,
+// otherwise, you need to set it by `value` or `defaultValue` or `defaultPickerValue`.
+// moment.locale('en');

-const customLocale = {
-  timezoneOffset: 8 * 60,
-  firstDayOfWeek: 0,
-  minimalDaysInFirstWeek: 1,
-};
+const log = console.log.bind(console);

-ReactDOM.render(<DatePicker locale={{ ...enUS, ...customLocale }} />, mountNode);
+ReactDOM.render(
+  <DatePicker
+    defaultPickerValue={moment().locale('en').utcOffset(0)}
+    locale={enUS}
+    showTime
+    onChange={log}
+  />,
+  mountNode
+);
 ````
--- a/components/date-picker/demo/month-picker.md
+++ b/components/date-picker/demo/month-picker.md
@ -1,6 +1,6 @@
 ---
 order: 9
-title: 
+title:
  zh-CN: 月选择器
  en-US: MonthPicker
 ---
@ -15,8 +15,10 @@ You can get a month selector by using `MonthPicker`.

 ````jsx
 import { DatePicker } from 'antd';
+import moment from 'moment';
+
 const MonthPicker = DatePicker.MonthPicker;
 ReactDOM.render(
-  <MonthPicker defaultValue="2015-12" />
+  <MonthPicker defaultValue={moment('2015-12', 'YYYY-MM')} />
 , mountNode);
 ````
--- a/components/date-picker/demo/range.md
+++ b/components/date-picker/demo/range.md
@ -1,6 +1,6 @@
 ---
 order: 8
-title: 
+title:
  zh-CN: 日期范围二
  en-US: Date range, case 2
 ---
@ -19,13 +19,13 @@ By using `RangePicker` to specify a date range, you can achieve a better interac
 import { DatePicker } from 'antd';
 const RangePicker = DatePicker.RangePicker;

-function onChange(value, dateString) {
-  console.log('From: ', value[0], ', to: ', value[1]);
-  console.log('From: ', dateString[0], ', to: ', dateString[1]);
+function onChange(dates, dateStrings) {
+  console.log('From: ', dates[0], ', to: ', dates[1]);
+  console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
 }
 ReactDOM.render(<div>
  <RangePicker style={{ width: 184 }} onChange={onChange} />
  <br />
-  <RangePicker showTime format="yyyy/MM/dd HH:mm:ss" onChange={onChange} />
+  <RangePicker showTime format="YYYY/MM/DD HH:mm:ss" onChange={onChange} />
 </div>, mountNode);
 ````
--- a/components/date-picker/demo/start-end.md
+++ b/components/date-picker/demo/start-end.md
@ -29,13 +29,13 @@ const DateRange = React.createClass({
    if (!startValue || !this.state.endValue) {
      return false;
    }
-    return startValue.getTime() > this.state.endValue.getTime();
+    return startValue.valueOf() > this.state.endValue.valueOf();
  },
  disabledEndDate(endValue) {
    if (!endValue || !this.state.startValue) {
      return false;
    }
-    return endValue.getTime() <= this.state.startValue.getTime();
+    return endValue.valueOf() <= this.state.startValue.valueOf();
  },
  onChange(field, value) {
    this.setState({
@ -61,6 +61,8 @@ const DateRange = React.createClass({
      <div>
        <DatePicker
          disabledDate={this.disabledStartDate}
+          showTime
+          format="YYYY-MM-DD HH:mm:ss"
          value={this.state.startValue}
          placeholder="开始日期"
          onChange={this.onStartChange}
@ -68,6 +70,8 @@ const DateRange = React.createClass({
        />
        <DatePicker
          disabledDate={this.disabledEndDate}
+          showTime
+          format="YYYY-MM-DD HH:mm:ss"
          value={this.state.endValue}
          placeholder="结束日期"
          onChange={this.onEndChange}
--- a/components/date-picker/demo/time.md
+++ b/components/date-picker/demo/time.md
@ -11,7 +11,7 @@ title:

 ## en-US

-This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to `TimePicker`, witch is a built-in function.
+This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to `TimePicker`, which is a built-in function.

 ````jsx
 import { DatePicker } from 'antd';
@ -21,6 +21,6 @@ function onChange(value) {
 }

 ReactDOM.render(
-  <DatePicker showTime format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间" onChange={onChange} />
+  <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间" onChange={onChange} />
 , mountNode);
 ````
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@ -1,7 +1,7 @@
 ---
 category: Components
 type: Form Controls
-english: DatePicker
+title: DatePicker
 ---

 To select/input a date.
@ -14,17 +14,26 @@ By clicking the input box, you can select a date from a popup calendar.

 ### DatePicker

-```html
-<DatePicker defaultValue="2015-01-01" />
+```jsx
+import moment from 'moment-timezone';
+
+// It's recommended to set locale and timezone in entry file globaly.
+import 'moment/locale/zh-cn';
+moment.locale('zh-cn');
+moment.tz.setDefault('Aisa/Shanghai');
+
+<DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
 ```

+> Note: `Datepicker` is renamed to `DatePicker` after `0.11`.
+
 | Property         | Description           | Type     | Default       |
 |--------------|----------------|----------|--------------|
-| value        | to set date           | String/Date   | -           |
-| defaultValue | to set default date        | String/Date   | -           |
-| format       | to set the date format, refer to [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | String   | "yyyy-MM-dd" |
+| value        | to set date           | [moment](http://momentjs.com/)   | -           |
+| defaultValue | to set default date        | [moment](http://momentjs.com/)   | -           |
+| format       | to set the date format, refer to [moment.js](http://momentjs.com/) | String   | "YYYY-MM-DD" |
 | disabledDate | to specify the date that cannot be selected | function | -           |
-| onChange     | a callback function, can be executed when the selected time is changing | function(date, dateString) | -           |
+| onChange     | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | -           |
 | disabled     | determine whether the DatePicker is disabled           | Boolean     | false        |
 | style        | to customize the style of the input box     | Object     | {}   |
 | popupStyle   | to customize the style of the popup calendar   | Object     | {}   |
@ -40,11 +49,11 @@ By clicking the input box, you can select a date from a popup calendar.

 | Property         | Description           | Type     | Default       |
 |--------------|----------------|----------|--------------|
-| value        | to set date          | String/Date   | -           |
-| defaultValue | to set default date       | String/Date   | -           |
-| format       | to set the date format, refer to [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | String   | "yyyy-MM" |
+| value        | to set date          | [moment](http://momentjs.com/)   | -           |
+| defaultValue | to set default date       | [moment](http://momentjs.com/)   | -           |
+| format       | to set the date format, refer to [moment.js](http://momentjs.com/) | String   | "YYYY-MM" |
 | disabledDate | to specify the date that cannot be selected | function | -           |
-| onChange     | a callback function, can be executed when the selected time is changing | function(Date value) | -           |
+| onChange     | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | -           |
 | disabled     | determine whether the MonthPicker is disabled           | Boolean     | false        |
 | style        | to customize the style of the input box     | Object     | {}   |
 | popupStyle   | to customize the style of the popup calendar   | Object     | {}   |
@ -56,10 +65,10 @@ By clicking the input box, you can select a date from a popup calendar.

 | Property         | Description           | Type     | Default       |
 |--------------|----------------|----------|--------------|
-| value        | to set date          | [String/Date, String/Date]   | -           |
-| defaultValue | to set default date       | [String/Date, String/Date]   | -           |
-| format       | to set the date format  | String    | "yyyy-MM-dd HH:mm:ss" |
-| onChange     | a callback function, can be executed when the selected time is changing | function(date[], dateString[]) | -           |
+| value        | to set date          | [moment, moment]   | -           |
+| defaultValue | to set default date       | [moment, moment]   | -           |
+| format       | to set the date format  | String    | "YYYY-MM-DD HH:mm:ss" |
+| onChange     | a callback function, can be executed when the selected time is changing | function(dates: [moment, moment], dateStrings: [string, string]) | -           |
 | showTime     | to provide an additional time selection  | Object/Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) |

 The following properties are the same with `DatePicker`: `disabled` `style` `popupStyle` `size` `locale` `showTime` `onOk` `getCalendarContainer`
--- a/components/date-picker/index.tsx
+++ b/components/date-picker/index.tsx
@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
+import moment from 'moment';
 import assign from 'object-assign';
 import RcCalendar from 'rc-calendar';
 import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
@ -19,9 +20,10 @@ interface PickerProps {
 }

 interface SinglePickerProps {
-  value?: string | Date;
-  defaultValue?: string | Date;
-  onChange?: (date: Date, dateString: string) => void;
+  value?: moment.Moment;
+  defaultValue?: moment.Moment;
+  defaultPickerValue?: moment.Moment;
+  onChange?: (date: moment.Moment, dateString: string) => void;
 }

 export interface DatePickerProps extends PickerProps, SinglePickerProps {
@ -31,12 +33,13 @@ const DatePicker = wrapPicker(createPicker(RcCalendar)) as React.ClassicComponen

 export interface MonthPickerProps extends PickerProps, SinglePickerProps {
 }
-const MonthPicker = wrapPicker(createPicker(MonthCalendar), 'yyyy-MM') as React.ClassicComponentClass<MonthPickerProps>;
+const MonthPicker = wrapPicker(createPicker(MonthCalendar), 'YYYY-MM') as React.ClassicComponentClass<MonthPickerProps>;

 export interface RangePickerProps extends PickerProps {
-  value?: [string | Date, string | Date];
-  defaultValue?: [string | Date, string | Date];
-  onChange?: (dates: [Date, Date], dateStrings: [String, String]) => void;
+  value?: [moment.Moment, moment.Moment];
+  defaultValue?: [moment.Moment, moment.Moment];
+  defaultPickerValue?: [moment.Moment, moment.Moment];
+  onChange?: (dates: [moment.Moment, moment.Moment], dateStrings: [string, string]) => void;
  showTime?: TimePickerProps;
 }

--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@ -1,8 +1,8 @@
 ---
 category: Components
-chinese: 日期选择框
 type: Form Controls
-english: DatePicker
+title: DatePicker
+subtitle: 日期选择框
 ---

 输入或选择日期的控件。
@ -15,17 +15,24 @@ english: DatePicker

 ### DatePicker

-```html
-<DatePicker defaultValue="2015-01-01" />
+```jsx
+import moment from 'moment-timezone';
+
+// 推荐在入口文件全局设置 locale 与时区
+import 'moment/locale/zh-cn';
+moment.locale('zh-cn');
+moment.tz.setDefault('Aisa/Shanghai');
+
+<DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
 ```

 | 参数         | 说明           | 类型     | 默认值       |
 |--------------|----------------|----------|--------------|
-| value        | 日期           | string or Date   | 无           |
-| defaultValue | 默认日期       | string or Date   | 无           |
-| format       | 展示的日期格式，配置参考 [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | string   | "yyyy-MM-dd" |
+| value        | 日期           | [moment](http://momentjs.com/)   | 无           |
+| defaultValue | 默认日期       | [moment](http://momentjs.com/)   | 无           |
+| format       | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string   | "YYYY-MM-DD" |
 | disabledDate | 不可选择的日期 | function | 无           |
-| onChange     | 时间发生变化的回调 | function(date, dateString) | 无           |
+| onChange     | 时间发生变化的回调 | function(date: moment, dateString: string) | 无           |
 | disabled     | 禁用           | bool     | false        |
 | style        | 自定义输入框样式     | object     | {}   |
 | popupStyle   | 格外的弹出日历样式   | object     | {}   |
@ -40,11 +47,11 @@ english: DatePicker

 | 参数         | 说明           | 类型     | 默认值       |
 |--------------|----------------|----------|--------------|
-| value        | 日期           | string or Date   | 无           |
-| defaultValue | 默认日期       | string or Date   | 无           |
-| format       | 展示的日期格式，配置参考 [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | string   | "yyyy-MM" |
+| value        | 日期           | moment   | 无           |
+| defaultValue | 默认日期       | moment   | 无           |
+| format       | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string   | "YYYY-MM" |
 | disabledDate | 不可选择的日期 | function | 无           |
-| onChange     | 时间发生变化的回调，发生在用户选择时间时 | function(Date value) | 无           |
+| onChange     | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | 无           |
 | disabled     | 禁用           | bool     | false        |
 | style        | 自定义输入框样式     | object     | {}   |
 | popupStyle   | 格外的弹出日历样式   | object     | {}   |
@ -56,10 +63,10 @@ english: DatePicker

 | 参数         | 说明           | 类型     | 默认值       |
 |--------------|----------------|----------|--------------|
-| value        | 日期          | [string/Date, string/Date]   | 无           |
-| defaultValue | 默认日期       | [string/Date, string/Date]   | 无           |
-| format       | 展示的日期格式  | string    | "yyyy-MM-dd HH:mm:ss" |
-| onChange     | 时间发生变化的回调，发生在用户选择时间时 | function(date[], dateString[]) | 无           |
+| value        | 日期          | [moment, moment]   | 无           |
+| defaultValue | 默认日期       | [moment, moment]   | 无           |
+| format       | 展示的日期格式  | string    | "YYYY-MM-DD HH:mm:ss" |
+| onChange     | 时间发生变化的回调，发生在用户选择时间时 | function(dates: [moment, moment], dateStrings: [string, string]) | 无           |
 | showTime     | 增加时间选择功能  | Object or Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) |

 `disabled` `style` `popupStyle` `size` `locale` `showTime` `onOk` `getCalendarContainer` 属性与 DatePicker 的一致。
--- a/components/date-picker/locale/en_US.tsx
+++ b/components/date-picker/locale/en_US.tsx
@ -1,15 +1,15 @@
-import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/en_US';
 import CalendarLocale from 'rc-calendar/lib/locale/en_US';
 import TimePickerLocale from '../../time-picker/locale/en_US';
 import assign from 'object-assign';
-// 统一合并为完整的 Locale
-const locale = assign({}, GregorianCalendarLocale);
-locale.lang = assign({
-  placeholder: 'Select date',
-  rangePlaceholder: ['Start date', 'End date'],
-}, CalendarLocale);

-locale.timePickerLocale = assign({}, TimePickerLocale);
+// 统一合并为完整的 Locale
+const locale = {
+  lang: assign({
+    placeholder: 'Select date',
+    rangePlaceholder: ['Start date', 'End date'],
+  }, CalendarLocale),
+  timePickerLocale: assign({}, TimePickerLocale),
+};

 // All settings at:
 // https://github.com/ant-design/ant-design/issues/424
--- a/components/date-picker/locale/ru_RU.tsx
+++ b/components/date-picker/locale/ru_RU.tsx
@ -2,17 +2,17 @@
 * Created by Andrey Gayvoronsky on 13/04/16.
 */

-import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/ru_RU';
 import CalendarLocale from 'rc-calendar/lib/locale/ru_RU';
 import TimePickerLocale from '../../time-picker/locale/ru_RU';
 import assign from 'object-assign';
-const locale = assign({}, GregorianCalendarLocale);
-locale.lang = assign({
-  placeholder: 'Выберите дату',
-  rangePlaceholder: ['Начальная дата', 'Конечная дата'],
-}, CalendarLocale);

-locale.timePickerLocale = assign({}, TimePickerLocale);
+const locale = {
+  lang: assign({
+    placeholder: 'Выберите дату',
+    rangePlaceholder: ['Начальная дата', 'Конечная дата'],
+  }, CalendarLocale),
+  timePickerLocale: assign({}, TimePickerLocale),
+};

 // All settings at:
 // https://github.com/ant-design/ant-design/issues/424
--- a/components/date-picker/locale/zh_CN.tsx
+++ b/components/date-picker/locale/zh_CN.tsx
@ -1,15 +1,20 @@
-import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/zh_CN';
 import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
 import TimePickerLocale from '../../time-picker/locale/zh_CN';
 import assign from 'object-assign';
-// 统一合并为完整的 Locale
-const locale = assign({}, GregorianCalendarLocale);
-locale.lang = assign({
-  placeholder: '请选择日期',
-  rangePlaceholder: ['开始日期', '结束日期'],
-}, CalendarLocale);

-locale.timePickerLocale = assign({}, TimePickerLocale);
+// To set the default locale of moment to zh-cn globally.
+import moment from 'moment';
+import 'moment/locale/zh-cn';
+moment.locale('zh-cn');
+
+// 统一合并为完整的 Locale
+const locale = {
+  lang: assign({
+    placeholder: '请选择日期',
+    rangePlaceholder: ['开始日期', '结束日期'],
+  }, CalendarLocale),
+  timePickerLocale: assign({}, TimePickerLocale),
+};

 // should add whitespace between char in Button
 locale.lang.ok = '确 定';
--- a/components/date-picker/style/MonthPanel.less
+++ b/components/date-picker/style/MonthPanel.less
@ -1,6 +1,6 @@
 .@{calendar-prefix-cls}-month-panel {
  left: 0;
-  top: 34px;
+  top: 1px;
  bottom: 0;
  right: 0;
  background: #fff;
--- a/components/date-picker/style/YearPanel.less
+++ b/components/date-picker/style/YearPanel.less
@ -1,6 +1,6 @@
 .@{calendar-prefix-cls}-year-panel {
  left: 0;
-  top: 34px;
+  top: 1px;
  bottom: 0;
  right: 0;
  background: #fff;
--- a/components/date-picker/wrapPicker.tsx
+++ b/components/date-picker/wrapPicker.tsx
@ -1,8 +1,6 @@
+import React from 'react';
 import { PropTypes } from 'react';
-import * as React from 'react';
-import TimePickerPanel from 'rc-time-picker/lib/module/Panel';
-import DateTimeFormat from 'gregorian-calendar-format';
-import GregorianCalendar from 'gregorian-calendar';
+import TimePickerPanel from 'rc-time-picker/lib/Panel';
 import classNames from 'classnames';
 import defaultLocale from './locale/zh_CN';
 import assign from 'object-assign';
@ -11,7 +9,7 @@ export default function wrapPicker(Picker, defaultFormat?) {
  const PickerWrapper = React.createClass({
    getDefaultProps() {
      return {
-        format: defaultFormat || 'yyyy-MM-dd',
+        format: defaultFormat || 'YYYY-MM-DD',
        transitionName: 'slide-up',
        popupStyle: {},
        onChange() {
@ -33,8 +31,8 @@ export default function wrapPicker(Picker, defaultFormat?) {

    getLocale() {
      const props = this.props;
-      let locale = defaultLocale;
      const context = this.context;
+      let locale = defaultLocale;
      if (context.antLocale && context.antLocale.DatePicker) {
        locale = context.antLocale.DatePicker;
      }
@ -44,25 +42,6 @@ export default function wrapPicker(Picker, defaultFormat?) {
      return result;
    },

-    getFormatter() {
-      const format = this.props.format;
-      const formatter = new DateTimeFormat(format as string, this.getLocale().lang.format);
-      return formatter;
-    },
-
-    parseDateFromValue(value) {
-      if (value) {
-        if (typeof value === 'string') {
-          return this.getFormatter().parse(value, {locale: this.getLocale()});
-        } else if (value instanceof Date) {
-          let date = new GregorianCalendar(this.getLocale());
-          date.setTime(+value);
-          return date;
-        }
-      }
-      return value;
-    },
-
    toggleOpen ({open}) {
      this.props.toggleOpen({open});
    },
@ -83,7 +62,7 @@ export default function wrapPicker(Picker, defaultFormat?) {

      const timeFormat = props.showTime && props.showTime.format;
      const rcTimePickerProps = {
-        formatter: new DateTimeFormat(timeFormat || 'HH:mm:ss', locale.timePickerLocale.format),
+        format: timeFormat || 'HH:mm:ss',
        showSecond: timeFormat && timeFormat.indexOf('ss') >= 0,
        showHour: timeFormat && timeFormat.indexOf('HH') >= 0,
      };
@ -93,7 +72,6 @@ export default function wrapPicker(Picker, defaultFormat?) {
          {...props.showTime}
          prefixCls="ant-calendar-time-picker"
          placeholder={locale.timePickerLocale.placeholder}
-          locale={locale.timePickerLocale}
          transitionName="slide-up"
        />
      ) : null;
@ -106,8 +84,6 @@ export default function wrapPicker(Picker, defaultFormat?) {
          locale={locale}
          timePicker={timePicker}
          toggleOpen={this.toggleOpen}
-          getFormatter={this.getFormatter}
-          parseDateFromValue={this.parseDateFromValue}
        />
      );
    },
--- a/components/form/demo/mix.md
+++ b/components/form/demo/mix.md
@ -2,7 +2,7 @@
 order: 5
 title:
  zh-CN: 表单组合
-  en-US: mix
+  en-US: Mix
 ---

 ## zh-CN
@ -16,6 +16,9 @@ A mix to demonstrate others ant-design component related to form.
 ````jsx
 import { Form, Select, InputNumber, DatePicker, TimePicker, Switch, Radio,
         Cascader, Slider, Button, Col, Upload, Icon } from 'antd';
+import moment from 'moment';
+import 'moment/locale/zh-cn';
+moment.locale('zh-cn');
 const FormItem = Form.Item;
 const Option = Select.Option;
 const RadioButton = Radio.Button;
--- a/components/form/demo/validate-other.md
+++ b/components/form/demo/validate-other.md
@ -47,7 +47,7 @@ let Demo = React.createClass({
  },

  checkBirthday(rule, value, callback) {
-    if (value && value.getTime() >= Date.now()) {
+    if (value && value.valueOf() >= Date.now()) {
      callback(new Error("You can't be born in the future!"));
    } else {
      callback();
@ -162,7 +162,7 @@ let Demo = React.createClass({
            rules: [
              {
                required: true,
-                type: 'date',
+                type: 'object',
                message: 'When is your birthday?',
              }, {
                validator: this.checkBirthday,
@ -178,9 +178,12 @@ let Demo = React.createClass({
          label="Select the time"
        >
          {getFieldDecorator('time', {
-            getValueFromEvent: (value, timeString) => timeString,
            rules: [
-              { required: true, message: 'Please select the time' },
+              {
+                required: true,
+                type: 'object',
+                message: 'Please select the time',
+              },
            ],
          })(
            <TimePicker />
--- a/components/locale-provider/demo/all.md
+++ b/components/locale-provider/demo/all.md
@ -17,6 +17,10 @@ Components which need localization support are listed here, you can toggle the l
 import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar,
         Popconfirm, Table, Modal, Button, Select, Transfer, Radio } from 'antd';
 import enUS from 'antd/lib/locale-provider/en_US';
+import moment from 'moment';
+import 'moment/locale/zh-cn';
+moment.locale('en');
+
 const Option = Select.Option;
 const RangePicker = DatePicker.RangePicker;

@ -94,8 +98,8 @@ const Page = React.createClass({
            render={item => item.title}
          />
        </div>
-        <div style={{ width: 290, border: '1px solid #d9d9d9', borderRadius: 4 }}>
-          <Calendar fullscreen={false} />
+        <div style={{ width: 319, border: '1px solid #d9d9d9', borderRadius: 4 }}>
+          <Calendar fullscreen={false} value={moment()} />
        </div>
        <div className="example">
          <Table dataSource={[]} columns={columns} />
@ -115,7 +119,13 @@ const App = React.createClass({
    };
  },
  changeLocale(e) {
-    this.setState({ locale: e.target.value });
+    const localeValue = e.target.value;
+    this.setState({ locale: localeValue });
+    if (!localeValue) {
+      moment.locale('zh-cn');
+    } else {
+      moment.locale('en');
+    }
  },
  render() {
    const locale = { ...this.state.locale };
--- a/components/time-picker/demo/disabled.md
+++ b/components/time-picker/demo/disabled.md
@ -16,8 +16,9 @@ A disabled state of the `TimePicker`.

 ````jsx
 import { TimePicker } from 'antd';
+import moment from 'moment';

 ReactDOM.render(
-  <TimePicker defaultValue="12:08:23" disabled />
+  <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />
 , mountNode);
 ````
--- a/components/time-picker/demo/size.md
+++ b/components/time-picker/demo/size.md
@ -15,12 +15,13 @@ The input box comes in three sizes. large is used in the form, while the medium

 ````jsx
 import { TimePicker } from 'antd';
+import moment from 'moment';

 ReactDOM.render(
  <div>
-    <TimePicker defaultValue="12:08:23" size="large" />
-    <TimePicker defaultValue="12:08:23" />
-    <TimePicker defaultValue="12:08:23" size="small" />
+    <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="large" />
+    <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
+    <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="small" />
  </div>
 , mountNode);
 ````
--- a/components/time-picker/demo/without-seconds.md
+++ b/components/time-picker/demo/without-seconds.md
@ -15,8 +15,10 @@ The `seconds` options are hidden and cannot be selected.

 ````jsx
 import { TimePicker } from 'antd';
+import moment from 'moment';

+const format = 'HH:mm';
 ReactDOM.render(
-  <TimePicker defaultValue="12:08:23" format="HH:mm" />
+  <TimePicker defaultValue={moment('12:08', format)} format={format} />
 , mountNode);
 ````
--- a/components/time-picker/index.en-US.md
+++ b/components/time-picker/index.en-US.md
@ -14,18 +14,19 @@ By clicking the input box, you can select a time from a popup panel.
 ## API
 ---

-```html
-<TimePicker defaultValue="13:30:56" />
+```jsx
+import moment from 'moment';
+<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />
 ```

-> Warning: `TimePicker` is renamed to `TimePicker` after 0.11.
+> Note: `TimePicker` is renamed to `TimePicker` after 0.11.

 | Property                 | Description | Type | Default |
 |---------------------|-----|-----|-------|
-| defaultValue        | to set default time | string or Date | - |
-| value               | to set time | string or Date | - |
+| defaultValue        | to set default time | [moment](http://momentjs.com/) | - |
+| value               | to set time | [moment](http://momentjs.com/) | - |
 | placeholder         | display when there's no value | string | "Select a time" |
-| onChange            | a callback function, can be executed when the selected time is changing    | function(date, dateString) | - |
+| onChange            | a callback function, can be executed when the selected time is changing    | function(time: moment, timeString: string): void | - |
 | format              | to set the time format | string | "HH:mm:ss"、"HH:mm"、"mm:ss" |
 | disabled            | determine whether the TimePicker is disabled | bool | false |
 | disabledHours       | to specify the hours that cannot be selected | function() | - |
@ -33,6 +34,5 @@ By clicking the input box, you can select a time from a popup panel.
 | disabledSeconds     | to specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - |
 | hideDisabledOptions | hide the options that can not be selected | boolean | false |
 | getPopupContainer   | to set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - |
-| locale              | localization configuration | Object | [default](https://github.com/ant-design/ant-design/issues/1270#issuecomment-201181384) |

 <style>.code-box-demo .ant-time-picker { margin: 0 8px 12px 0; }</style>
--- a/components/time-picker/index.tsx
+++ b/components/time-picker/index.tsx
@ -1,28 +1,26 @@
-import * as React from 'react';
-import DateTimeFormat from 'gregorian-calendar-format';
+import React from 'react';
+import moment from 'moment';
 import RcTimePicker from 'rc-time-picker/lib/TimePicker';
-import defaultLocale from './locale/zh_CN';
 import classNames from 'classnames';
-import GregorianCalendar from 'gregorian-calendar';
 import assign from 'object-assign';
+import defaultLocale from './locale/zh_CN';

 // TimePicker
 export interface TimePickerProps {
-  size: 'large' | 'default' | 'small';
+  className?: string;
+  size?: 'large' | 'default' | 'small';
  /** 默认时间 */
-  value?: string | Date;
+  value?: moment.Moment;
  /** 初始默认时间 */
-  defaultValue?: string | Date;
+  defaultValue?: moment.Moment;
  /** 展示的时间格式 : "HH:mm:ss"、"HH:mm"、"mm:ss" */
  format?: string;
  /** 时间发生变化的回调 */
-  onChange?: (date: Date, dateString: string) => void;
+  onChange?: (time: moment.Moment, timeString: string) => void;
  /** 禁用全部操作 */
  disabled?: boolean;
  /** 没有值的时候显示的内容 */
  placeholder?: string;
-  /** 国际化配置 */
-  locale?: {};
  /** 隐藏禁止选择的选项 */
  hideDisabledOptions?: boolean;
  /** 禁止选择部分小时选项 */
@ -47,7 +45,6 @@ export default class TimePicker extends React.Component<TimePickerProps, any> {
    prefixCls: 'ant-time-picker',
    onChange() {
    },
-    locale: {},
    align: {
      offset: [0, -2],
    },
@ -66,90 +63,52 @@ export default class TimePicker extends React.Component<TimePickerProps, any> {

  context: TimePickerContext;

-  getFormatter() {
-    return new DateTimeFormat(this.props.format as string, this.getLocale().format);
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: props.value || props.defaultValue,
+    };
  }

-  /**
-   * 获得输入框的 className
-   */
-  getSizeClass() {
-    let sizeClass = '';
-    if (this.props.size === 'large') {
-      sizeClass = ' ant-input-lg';
-    } else if (this.props.size === 'small') {
-      sizeClass = ' ant-input-sm';
+  componentWillReceiveProps(nextProps) {
+    if ('value' in nextProps) {
+      this.setState({ value: nextProps.value });
    }
-    return sizeClass;
  }

-  /**
-   * 获得输入框的默认值
-   */
-  parseTimeFromValue(value) {
-    if (value) {
-      if (typeof value === 'string') {
-        return this.getFormatter().parse(value, {
-          locale: this.getLocale().calendar,
-          obeyCount: true,
-        });
-      } else if (value instanceof Date) {
-        let date = new GregorianCalendar(this.getLocale().calendar);
-        date.setTime(+value);
-        return date;
-      }
+  handleChange = (value: moment.Moment) => {
+    if (!('value' in this.props)) {
+      this.setState({ value });
    }
-    return value;
-  }
-
-  handleChange = (value) => {
-    this.props.onChange(
-      value ? new Date(value.getTime()) : null,
-      value ? this.getFormatter().format(value) : ''
-    );
+    this.props.onChange(value, (value && value.format(this.props.format)) || '');
  }

  getLocale() {
-    let locale = defaultLocale;
-    if (this.context.antLocale && this.context.antLocale.TimePicker) {
-      locale = this.context.antLocale.TimePicker;
-    }
-    // 统一合并为完整的 Locale
-    return assign({}, locale, this.props.locale);
+    const antLocale = this.context.antLocale;
+    const timePickerLocale = (antLocale && antLocale.TimePicker) || defaultLocale;
+    return timePickerLocale;
  }

  render() {
-    const locale = this.getLocale();
    const props = assign({}, this.props);
-    props.placeholder = ('placeholder' in this.props)
-      ? props.placeholder : locale.placeholder;
-    if (props.defaultValue) {
-      props.defaultValue = this.parseTimeFromValue(props.defaultValue);
-    } else {
-      delete props.defaultValue;
-    }
-    if (props.value) {
-      props.value = this.parseTimeFromValue(props.value);
-    }
-    let className = classNames({
+    delete props.defaultValue;
+
+    const className = classNames({
      [props.className]: !!props.className,
      [`${props.prefixCls}-${props.size}`]: !!props.size,
    });
-    if (props.format.indexOf('ss') < 0) {
-      props.showSecond = false;
-    }
-    if (props.format.indexOf('HH') < 0) {
-      props.showHour = false;
-    }

    return (
      <RcTimePicker
        {...props}
        className={className}
-        locale={locale}
-        formatter={this.getFormatter() }
+        value={this.state.value}
+        placeholder={props.placeholder || this.getLocale().placeholder}
+        showHour={props.format.indexOf('HH') > -1}
+        showSecond={props.format.indexOf('ss') > -1}
        onChange={this.handleChange}
-        />
+      />
    );
  }
 }
--- a/components/time-picker/index.zh-CN.md
+++ b/components/time-picker/index.zh-CN.md
@ -15,18 +15,19 @@ english: TimePicker
 ## API
 ---

-```html
-<TimePicker defaultValue="13:30:56" />
+```jsx
+import moment from 'moment';
+<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />
 ```

 > 注意：`0.11+` 后 `Timepicker` 改名为 `TimePicker`。

 | 参数                 | 说明 | 类型 | 默认值 |
 |---------------------|-----|-----|-------|
-| defaultValue        | 初始默认时间 | string or Date | 无 |
-| value               | 默认时间 | string or Date | 无 |
+| defaultValue        | 默认时间 | [moment](http://momentjs.com/) | 无 |
+| value               | 当前时间 | [moment](http://momentjs.com/) | 无 |
 | placeholder         | 没有值的时候显示的内容 | string | "请选择时间" |
-| onChange            | 时间发生变化的回调     | function(date, dateString) | 无 |
+| onChange            | 时间发生变化的回调     | function(time: moment, timeString: string): void | 无 |
 | format              | 展示的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" |
 | disabled            | 禁用全部操作 | bool | false |
 | disabledHours       | 禁止选择部分小时选项 | function() | 无 |
@ -34,6 +35,5 @@ english: TimePicker
 | disabledSeconds     | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | 无 |
 | hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |
 | getPopupContainer   | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
-| locale              | 国际化配置 | Object | [默认配置](https://github.com/ant-design/ant-design/issues/1270#issuecomment-201181384) |

 <style>.code-box-demo .ant-time-picker { margin: 0 8px 12px 0; }</style>
--- a/components/time-picker/locale/en_US.tsx
+++ b/components/time-picker/locale/en_US.tsx
@ -1,7 +1,5 @@
-import TimepickerLocale from 'rc-time-picker/lib/locale/en_US';
-import assign from 'object-assign';
-const locale = assign({}, {
+const locale = {
  placeholder: 'Select a time',
-}, TimepickerLocale);
+};

 export default locale;
--- a/components/time-picker/locale/ru_RU.tsx
+++ b/components/time-picker/locale/ru_RU.tsx
@ -1,10 +1,8 @@
 /**
 * Created by Andrey Gayvoronsky on 13/04/16.
 */
-import TimepickerLocale from 'rc-time-picker/lib/locale/ru_RU';
-import assign from 'object-assign';
-const locale = assign({}, {
+const locale = {
  placeholder: 'Выберите время',
-}, TimepickerLocale);
+};

 export default locale;
--- a/components/time-picker/locale/zh_CN.tsx
+++ b/components/time-picker/locale/zh_CN.tsx
@ -1,7 +1,5 @@
-import TimepickerLocale from 'rc-time-picker/lib/locale/zh_CN';
-import assign from 'object-assign';
-const locale = assign({}, {
+const locale = {
  placeholder: '请选择时间',
-}, TimepickerLocale);
+};

 export default locale;
--- a/custom-typings.d.ts
+++ b/custom-typings.d.ts
@ -7,26 +7,6 @@ declare module 'react-addons-pure-render-mixin' {
  export default exports;
 }

-declare module 'gregorian-calendar-format' {
-  export default function(format: string, localeFormat: Object): void;
-}
-
-declare module 'gregorian-calendar' {
-  export default function({}): void;
-}
-
-declare module 'gregorian-calendar/lib/locale/en_US' {
-  export default {};
-}
-
-declare module 'gregorian-calendar/lib/locale/zh_CN' {
-  export default {};
-}
-
-declare module 'gregorian-calendar/lib/locale/ru_RU' {
-  export default {};
-}
-
 declare module 'rc-calendar/lib/locale/en_US' {
  export default {};
 }
@ -55,7 +35,7 @@ declare module 'rc-calendar/lib/MonthCalendar' {
  export default function(): any;
 }

-declare module 'rc-time-picker/lib/module/Panel' {
+declare module 'rc-time-picker/lib/Panel' {
  export default function(): any;
 }

--- a/package.json
+++ b/package.json
@ -42,7 +42,7 @@
    "object-assign": "~4.1.0",
    "object.omit": "^2.0.0",
    "rc-animate": "~2.3.0",
-    "rc-calendar": "~6.0.2",
+    "rc-calendar": "^7.0.3",
    "rc-cascader": "~0.10.1",
    "rc-checkbox": "~1.4.0",
    "rc-collapse": "~1.6.4",
@ -64,7 +64,7 @@
    "rc-switch": "~1.4.2",
    "rc-table": "~4.6.0",
    "rc-tabs": "~5.9.2",
-    "rc-time-picker": "~1.1.6",
+    "rc-time-picker": "^2.0.0",
    "rc-tooltip": "~3.4.2",
    "rc-tree": "~1.3.6",
    "rc-tree-select": "~1.8.0",
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,10 +1,11 @@
 {
  "compilerOptions": {
    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "target": "es6"
  },
  "exclude": [
    "node_modules"
  ]
-}
+}