From 4026221d451b246956983bb42140142d4a48b7d7 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 9 Sep 2016 13:55:21 +0800 Subject: [PATCH] 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 --- components/calendar/Header.tsx | 25 +++-- components/calendar/demo/basic.md | 2 +- components/calendar/demo/custom-render.md | 9 +- components/calendar/demo/locale.md | 9 +- components/calendar/demo/notice-calendar.md | 4 +- components/calendar/index.en-US.md | 14 +-- components/calendar/index.tsx | 37 +++--- components/calendar/index.zh-CN.md | 14 +-- components/date-picker/Calendar.tsx | 2 +- components/date-picker/RangePicker.tsx | 42 +++---- components/date-picker/createPicker.tsx | 33 +++--- components/date-picker/demo/basic.md | 4 +- components/date-picker/demo/disabled-date.md | 2 +- components/date-picker/demo/disabled.md | 3 +- components/date-picker/demo/formatter.md | 8 +- components/date-picker/demo/locale.md | 34 ++++-- components/date-picker/demo/month-picker.md | 6 +- components/date-picker/demo/range.md | 10 +- components/date-picker/demo/start-end.md | 8 +- components/date-picker/demo/time.md | 4 +- components/date-picker/index.en-US.md | 39 ++++--- components/date-picker/index.tsx | 19 ++-- components/date-picker/index.zh-CN.md | 39 ++++--- components/date-picker/locale/en_US.tsx | 16 +-- components/date-picker/locale/ru_RU.tsx | 14 +-- components/date-picker/locale/zh_CN.tsx | 21 ++-- components/date-picker/style/MonthPanel.less | 2 +- components/date-picker/style/YearPanel.less | 2 +- components/date-picker/wrapPicker.tsx | 34 +----- components/form/demo/mix.md | 5 +- components/form/demo/validate-other.md | 11 +- components/locale-provider/demo/all.md | 16 ++- components/time-picker/demo/disabled.md | 3 +- components/time-picker/demo/size.md | 7 +- .../time-picker/demo/without-seconds.md | 4 +- components/time-picker/index.en-US.md | 14 +-- components/time-picker/index.tsx | 105 ++++++------------ components/time-picker/index.zh-CN.md | 12 +- components/time-picker/locale/en_US.tsx | 6 +- components/time-picker/locale/ru_RU.tsx | 6 +- components/time-picker/locale/zh_CN.tsx | 6 +- custom-typings.d.ts | 22 +--- package.json | 4 +- tsconfig.json | 3 +- 44 files changed, 321 insertions(+), 359 deletions(-) diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx index 8ebf545a33c0..1af408098842 100644 --- 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 { ); } - 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 { 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 { 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 = ( diff --git a/components/calendar/demo/basic.md b/components/calendar/demo/basic.md index 712ace6d6175..6e5093702ece 100644 --- 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 index e0470ee64ca2..1cd5ea304151 100644 --- 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
自定义日数据 {value.getDayOfMonth()}
; + return
自定义日数据 {value.date()}
; } function monthCellRender(value) { - return
自定义月数据 {value.getMonth()}
; + return
自定义月数据 {value.month()}
; } ReactDOM.render( - , mountNode); diff --git a/components/calendar/demo/locale.md b/components/calendar/demo/locale.md index 48b1fdb476e1..0a5bd4690de2 100644 --- 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( - + , mountNode); ```` diff --git a/components/calendar/demo/notice-calendar.md b/components/calendar/demo/notice-calendar.md index de63332f229d..f3f0b440c146 100644 --- 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 index 825eae4b6000..f9b1d3e0f514 100644 --- 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 index bb185e838eac..e7864ca9f65d 100644 --- 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 { @@ -56,7 +56,7 @@ export default class Calendar extends React.Component { 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 { 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 { return result; } - monthCellRender = (value, locale) => { + monthCellRender = (value) => { const prefixCls = this.props.prefixCls; - const month = value.getMonth(); return (
- {locale.format.shortMonths[month]} + {value.localeData().monthsShort(value)}
{this.props.monthCellRender(value)} @@ -120,7 +113,7 @@ export default class Calendar extends React.Component { return (
- {zerofixed(value.getDayOfMonth())} + {zerofixed(value.date())}
{this.props.dateCellRender(value)} diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index 520abba8118f..489eda649b7f 100644 --- 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 index bb60c4cf4886..10c1acc42eab 100644 --- 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'; diff --git a/components/date-picker/RangePicker.tsx b/components/date-picker/RangePicker.tsx index 0ef673c41f3a..8176c11168d6 100644 --- 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 { 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 { 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 { const calendar = ( ); @@ -114,7 +101,7 @@ export default class RangePicker extends React.Component { return ( { getCalendarContainer={getCalendarContainer} onOpen={props.toggleOpen} onClose={props.toggleOpen} - {...pickerChangeHandler} > { ({ value }) => { @@ -136,7 +122,7 @@ export default class RangePicker extends React.Component { @@ -144,7 +130,7 @@ export default class RangePicker extends React.Component { diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx index d34fd5d59a12..c7750e8f2de5 100644 --- 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 = ( { ({ value }) => { return ( - + {clearIcon} - ); - } + ); } + } ); diff --git a/components/date-picker/demo/basic.md b/components/date-picker/demo/basic.md index 0746f61b4423..4e3accd60db5 100644 --- 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(, mountNode); diff --git a/components/date-picker/demo/disabled-date.md b/components/date-picker/demo/disabled-date.md index 23e8ccc0b8a9..7a1162744c8c 100644 --- 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( diff --git a/components/date-picker/demo/disabled.md b/components/date-picker/demo/disabled.md index d6732ce8f5e0..8d1b1bbfde49 100644 --- 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( - + , mountNode); ```` diff --git a/components/date-picker/demo/formatter.md b/components/date-picker/demo/formatter.md index b1a8634160aa..fb10eaf41b64 100644 --- 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( - + , mountNode); ```` diff --git a/components/date-picker/demo/locale.md b/components/date-picker/demo/locale.md index eabd7a85114a..d57647fe673a 100644 --- 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'; - -const customLocale = { - timezoneOffset: 8 * 60, - firstDayOfWeek: 0, - minimalDaysInFirstWeek: 1, -}; - -ReactDOM.render(, mountNode); +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 log = console.log.bind(console); + +ReactDOM.render( + , + mountNode +); ```` diff --git a/components/date-picker/demo/month-picker.md b/components/date-picker/demo/month-picker.md index 5c54f4c806ca..073608cda615 100644 --- 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( - + , mountNode); ```` diff --git a/components/date-picker/demo/range.md b/components/date-picker/demo/range.md index 1b12eb2836f9..4193fd8e4d3f 100644 --- 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(

- +
, mountNode); ```` diff --git a/components/date-picker/demo/start-end.md b/components/date-picker/demo/start-end.md index feb5a2bf1146..9a95c9ba5423 100644 --- 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({
+ , mountNode); ```` diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index 8f6d1b4f49bb..b41ecac93579 100644 --- 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 - +```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'); + + ``` +> 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` diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx index 108cc7824e14..145dd2af3487 100644 --- 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; +const MonthPicker = wrapPicker(createPicker(MonthCalendar), 'YYYY-MM') as React.ClassicComponentClass; 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; } diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index e52f1d325c11..8458a28477f5 100644 --- 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 - +```jsx +import moment from 'moment-timezone'; + +// 推荐在入口文件全局设置 locale 与时区 +import 'moment/locale/zh-cn'; +moment.locale('zh-cn'); +moment.tz.setDefault('Aisa/Shanghai'); + + ``` | 参数 | 说明 | 类型 | 默认值 | |--------------|----------------|----------|--------------| -| 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 的一致。 diff --git a/components/date-picker/locale/en_US.tsx b/components/date-picker/locale/en_US.tsx index 345128852d8e..67d787d6c7f4 100644 --- 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 diff --git a/components/date-picker/locale/ru_RU.tsx b/components/date-picker/locale/ru_RU.tsx index 80a46415fc25..7e305e0b0e33 100644 --- 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 diff --git a/components/date-picker/locale/zh_CN.tsx b/components/date-picker/locale/zh_CN.tsx index 350de8ce063a..8a6a6d571d86 100644 --- 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 = '确 定'; diff --git a/components/date-picker/style/MonthPanel.less b/components/date-picker/style/MonthPanel.less index 48bd7083c139..cc7b76972ed4 100644 --- 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; diff --git a/components/date-picker/style/YearPanel.less b/components/date-picker/style/YearPanel.less index c1b12d6c68d7..cdc253aeef65 100644 --- 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; diff --git a/components/date-picker/wrapPicker.tsx b/components/date-picker/wrapPicker.tsx index bfb93b465cc9..e8113067b957 100644 --- 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} /> ); }, diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md index 466467d7d1d1..86bbaf426cac 100644 --- 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; diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md index 17f0a6d5a0a0..41973df38e67 100644 --- 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', + }, ], })( diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md index 2cd9a74c8aff..48eb44ca3340 100644 --- 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} />
-
- +
+
@@ -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 }; diff --git a/components/time-picker/demo/disabled.md b/components/time-picker/demo/disabled.md index 67a75f6a7f46..ea9e82d6120b 100644 --- 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( - + , mountNode); ```` diff --git a/components/time-picker/demo/size.md b/components/time-picker/demo/size.md index 42ffaf6bc588..c3ca2140769e 100644 --- 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(
- - - + + +
, mountNode); ```` diff --git a/components/time-picker/demo/without-seconds.md b/components/time-picker/demo/without-seconds.md index a6a38756a04a..c1d8aaafb771 100644 --- 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( - + , mountNode); ```` diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md index 99e974adb211..329a9ae31dae 100644 --- 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 - +```jsx +import moment from 'moment'; + ``` -> 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) | diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx index e35fe70c1937..eecffd1c6099 100644 --- 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 { prefixCls: 'ant-time-picker', onChange() { }, - locale: {}, align: { offset: [0, -2], }, @@ -66,90 +63,52 @@ export default class TimePicker extends React.Component { context: TimePickerContext; - getFormatter() { - return new DateTimeFormat(this.props.format as string, this.getLocale().format); - } + constructor(props) { + super(props); - /** - * 获得输入框的 className - */ - getSizeClass() { - let sizeClass = ''; - if (this.props.size === 'large') { - sizeClass = ' ant-input-lg'; - } else if (this.props.size === 'small') { - sizeClass = ' ant-input-sm'; - } - return sizeClass; + this.state = { + value: props.value || props.defaultValue, + }; } - /** - * 获得输入框的默认值 - */ - 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; - } + componentWillReceiveProps(nextProps) { + if ('value' in nextProps) { + this.setState({ value: nextProps.value }); } - return value; } - handleChange = (value) => { - this.props.onChange( - value ? new Date(value.getTime()) : null, - value ? this.getFormatter().format(value) : '' - ); + handleChange = (value: moment.Moment) => { + if (!('value' in this.props)) { + this.setState({ 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 ( -1} + showSecond={props.format.indexOf('ss') > -1} onChange={this.handleChange} - /> + /> ); } } diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md index 350ee431603a..680c4fb02990 100644 --- a/components/time-picker/index.zh-CN.md +++ b/components/time-picker/index.zh-CN.md @@ -15,18 +15,19 @@ english: TimePicker ## API --- -```html - +```jsx +import moment from 'moment'; + ``` > 注意：`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) | diff --git a/components/time-picker/locale/en_US.tsx b/components/time-picker/locale/en_US.tsx index f5e274cf0c35..fa7d5114f8f5 100644 --- 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; diff --git a/components/time-picker/locale/ru_RU.tsx b/components/time-picker/locale/ru_RU.tsx index 4e2845e90cbd..0490573e73e6 100644 --- 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; diff --git a/components/time-picker/locale/zh_CN.tsx b/components/time-picker/locale/zh_CN.tsx index b7ae75b71699..6898e575d102 100644 --- 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; diff --git a/custom-typings.d.ts b/custom-typings.d.ts index c0350d85921b..af6ffcca0296 100644 --- 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; } diff --git a/package.json b/package.json index 8c8731dd0ca8..62b7e96e8c35 100644 --- 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", diff --git a/tsconfig.json b/tsconfig.json index 7c27d3319337..c77931336ea2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,10 +1,11 @@ { "compilerOptions": { "moduleResolution": "node", + "allowSyntheticDefaultImports": true, "jsx": "preserve", "target": "es6" }, "exclude": [ "node_modules" ] -} \ No newline at end of file +}