{"meta":"

Guide #

\n

DatePicker are used to select a single date for an input.

\n","api":"

API #

\n

DatePicker #

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
labelInset label of inputReactNode-
sizeSize of input

option:
'small', 'medium', 'large'		Enum'medium'
stateState of input

option:
'success', 'error'		Enum-
placeholderPlaceholder of inputString-
defaultVisibleMonthDefault visible month

signature:
Function() => MomentObject
return:
{MomentObject} moment instance with specified month
Function-
valueValue of date-pickercustom-
defaultValueDefault value of date-pickercustom-
formatFormat of date value (it will also effect user input)String'YYYY-MM-DD'
showTimeEnable time-picker, pass object like { defaultValue, format, ... }Object/Booleanfalse
resetTimeIf reset time for every re-selectBooleanfalse
disabledDateFunction to disable date

signature:
Function(dateValue: MomentObject) => Boolean
parameter:
dateValue: {MomentObject} null
view: {Enum} current view type: 'year', 'month', 'date'
return:
{Boolean} if disable current date
Function() => false
footerRenderTemplate render for custom footer

signature:
Function() => Node
return:
{Node} Custom footer
Function() => null
onChangeCallback when date changes

signature:
Function() => MomentObject
return:
{MomentObject} dateValue
Functionfunc.noop
onOkCallback when click the ok button

signature:
Function() => MomentObject
return:
{MomentObject} dateValue
Functionfunc.noop
disabledDisable the pickerBoolean-
hasClearHas clear iconBooleantrue
visibleVisible state of popupBoolean-
defaultVisibleDefault visible state of popupBoolean-
onVisibleChangeCallback when visible state changes

signature:
Function(visible: Boolean, reason: String) => void
parameter:
visible: {Boolean} if popup visible
reason: {String} reason to change visible		Functionfunc.noop
popupTriggerTypeTrigger type of popup

option:
'click', 'hover'		Enum'click'
popupAlignAlign of popup, see Overlay doc for detailString'tl tl'
popupContainerContainer of popup

signature:
Function(target: Element) => Element
parameter:
target: {Element} target element
return:
{Element} container of popup
Function-
popupStyleCustom style of popupObject-
popupClassNameCustom className of popupString-
popupPropsProps of popupObject-
followTriggerfollow Trigger or notBoolean-
dateInputAriaLabelDate input aria-label attrString-
\n

DatePicker.RangePicker #

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
sizeSize of input

option:
'small', 'medium', 'large'		Enum'medium'
type (v1.19.0+)Select date range type

option:
'date', 'month', 'year'		Enum'date'
defaultVisibleMonthDefault visible month

signature:
Function() => MomentObject
return:
{MomentObject} moment instance with specified month
Function-
valueRange value [moment, moment]Array-
defaultValueDefault range value [moment, moment]Array-
formatDate formatStringFunction
outputFormatDate output formatString((date: Dayjs, dateStr: String) => any)
placeholderinput hints:['start date', 'end date']Array-
showTimeEnable time pickerObject/Booleanfalse
resetTimeIf reset time for every selectBooleanfalse
disabledDateFunction to disable dates

signature:
Function(dateValue: MomentObject) => Boolean
parameter:
dateValue: {MomentObject} null
view: {Enum} current view type: 'year', 'month', 'date'
return:
{Boolean} if disabled
Function() => false
footerRenderTemplate render for footer

signature:
Function() => Node
return:
{Node} custom footer
Function() => null
onChangeCallback when date changes

signature:
Function() => MomentObject
return:
{MomentObject} range values
Functionfunc.noop
onCalendarChangeCallback function, can be executed when the start time or the end time of the range is changing.

signature:
Function(dates, dateStrings) => void		Functionfunc.noop
onOkCallback when click ok button

signature:
Function() => MomentObject
return:
{MomentObject} range values
Functionfunc.noop
labelInset label of inputReactNode-
stateState of input

option:
'error', 'success'		Enum-
disabledDisable the pickerBoolean-
hasClearHas clear iconBooleantrue
visibleVisible state of popupBoolean-
defaultVisibleDefault visible state of popupBoolean-
onVisibleChangeCallback when visible state changes

signature:
Function(visible: Boolean, reason: String) => void
parameter:
visible: {Boolean} if popup visible
reason: {String} reason to change visible		Functionfunc.noop
popupTriggerTypeTrigger type of popup

option:
'click', 'hover'		Enum'click'
popupAlignAlign of popupString'tl tl'
popupContainerContainer of a popup

signature:
Function(target: Element) => Element
option:
target: {Element} target element
return:
{Element} coninter element of popup
Function-
popupStyleCustom style of popupObject-
popupClassNameCustom className of popupString-
popupPropsProps of popupObject-
startDateInputAriaLabelStart date input aria-label attributeString-
startTimeInputAriaLabelStart time input aria-label attributeString-
endDateInputAriaLabelEnd date input aria-label attributeString-
endTimeInputAriaLabelEnd time input aria-label attributeString-
\n

DatePicker.WeekPicker v1.19.0+ #

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
labelInset label of inputReactNode-
sizeSize of input

option:
'small', 'medium', 'large'		Enum'medium'
stateState of input

option:
'success', 'error'		Enum-
placeholderPlaceholder of inputString-
defaultVisibleMonthDefault visible month

signature:
Function() => MomentObject
return:
{MomentObject} moment instance with specified month
Function-
valueValue of date-pickermoment-
defaultValueDefault value of date-pickermoment-
formatFormat of date value (it will also effect user input)String'YYYY-wo'
\n

| disabledDate | Function to disable date

signature:
Function(dateValue: MomentObject) => Boolean
parameter:
dateValue: {MomentObject} null
view: {Enum} current view type: 'year', 'month', 'date'
return:
{Boolean} if disable current date
| Function | () => false |\n| footerRender | Template render for custom footer

signature:
Function() => Node
return:
{Node} Custom footer
| Function | () => null |\n| onChange | Callback when date changes

signature:
Function() => MomentObject
return:
{MomentObject} dateValue
| Function | func.noop |\n| disabled | Disable the picker | Boolean | - |\n| hasClear | Has clear icon | Boolean | true |\n| visible | Visible state of popup | Boolean | - |\n| defaultVisible | Default visible state of popup | Boolean | - |\n| onVisibleChange | Callback when visible state changes

signature:
Function(visible: Boolean, reason: String) => void
parameter:
visible: {Boolean} if popup visible
reason: {String} reason to change visible | Function | func.noop |\n| popupTriggerType | Trigger type of popup

option:
'click', 'hover' | Enum | 'click' |\n| popupAlign | Align of popup | String | 'tl tl' |\n| popupContainer | Container of a popup

signature:
Function(target: Element) => Element
option:
target: {Element} target element
return:
{Element} coninter element of popup
| Function | - |\n| popupStyle | Custom style of popup | Object | - |\n| popupClassName | Custom className of popup | String | - |\n| popupProps | Props of popup | Object | - |

\n

ARIA and KeyBoard #

\n

When the Date Picker is focused, press enter will open popup to input date or time.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
number keyNeed to manual input the date, the specified date format
Enteropen the calendar or select date after input date
Escclose the calendar
UpInput previous day（Month Picker is previous month， Year Picker is previous year）
DownInput next day（Month Picker is next month， Year Picker is next year）
Page UpInput previous month
Page DownInput next month
Alt + Page UpInput previous year
Alt + Page DownInput next year
\n"}