ant-design/components/date-picker/index.en-US.md
2016-09-14 09:42:16 +08:00

4.8 KiB

category type title
Components Form Controls DatePicker

To select/input a date.

When To Use

By clicking the input box, you can select a date from a popup calendar.

API

DatePicker

import moment from 'moment-timezone/moment-timezone';

// It's recommended to set locale and timezone in entry file globaly.
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
// The following data is copied from https://github.com/moment/moment-timezone/blob/develop/data/packed/latest.json
moment.tz.add('Asia/Shanghai|CST CDT|-80 -90|01010101010101010|-1c1I0 LX0 16p0 1jz0 1Myp0 Rb0 1o10 11z0 1o10 11z0 1qN0 11z0 1o10 11z0 1o10 11z0|23e6');
moment.tz.setDefault('Asia/Shanghai')

<DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
Property Description Type Default
value to set date moment -
defaultValue to set default date moment -
format to set the date format, refer to moment.js 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: 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 {}
size determine the size of the input box, the height of large and small, are 32px and 22px respectively, while default size is 28px String -
locale localization configuration Object default
onOk a callback function, can be executed when OK-button is clicked function(Date value) -
open open state of picker bool -
toggleOpen a callback function, can be executed whether the popup calendar is popped up or closed function(open) -
getCalendarContainer to set the container of the floating layer, while the default is to create a div element in body function(trigger) -
showTime to provide an additional time selection Object/Boolean TimePicker Options

MonthPicker

Property Description Type Default
value to set date moment -
defaultValue to set default date moment -
format to set the date format, refer to moment.js 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: 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 {}
size determine the size of the input box, the height of large and small, are 32px and 22px respectively, while default size is 28px String -
locale localization configuration Object default
getCalendarContainer to set the container of the floating layer, while the default is to create a div element in body function(trigger) -

RangePicker

Property Description Type Default
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

The following properties are the same with DatePicker: disabled style popupStyle size locale showTime onOk getCalendarContainer