Search
Date Picker

To select or input a date.

Date Picker

When to use

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


Basic

Basic use case. Users can select or input a date in panel

Range Picker

Set range picker type by picker prop.








Date Format

We can set the date format by format.

Choose Time

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

Disabled

A disabled state of the DatePicker. You can also set as array to disable one of input.






Disabled Date & Time

Disabled part of dates and time by disabledDate and disabledTime respectively, and disabledTime only works with showTime.






Select range dates in 7 days

A example shows how to select a dynamic range by using onCalendarChange and disabledDate.

Preset Ranges

We can set preset ranges to RangePicker to improve user experience.
Render extra footer in panel for customized requirements.

Customized Date Rendering

We can customize the rendering of date cells in the calendar by providing a dateRender function to DatePicker.

Bordered-less

Bordered-less style component.














API

Common API
PropertyDescriptionTypeDefault
allowClear
Whether to show clear button
boolean
true
autoFocus
get focus when component mounted
boolean
false
className
picker className
string
''
dateRender
custom rendering function for date cells
function(currentDate: moment, today: moment) => React.ReactNode
-
disabled
determine whether the DatePicker is disabled
boolean
false
disabledDate
specify the date that cannot be selected
(currentDate: moment) => boolean
-
dropdownClassName
to customize the className of the popup calendar
string
-
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
mode
picker panel mode（Cannot select year or month anymore?
time | date | month | year | decade
-
open
open state of picker
boolean
-
picker
Set picker type
date | week | month | quarter (4.1.0) | year
date
placeholder
placeholder of date input
string | [string,string]
-
popupStyle
to customize the style of the popup calendar
CSSProperties
{}
size
determine the size of the input box, the height of large and small, are 40px and 24px respectively, while default size is 32px
large | middle | small
-
bordered
whether has border style
boolean
true
suffixIcon
The custom suffix icon
ReactNode
-
style
to customize the style of the input box
CSSProperties
{}
onOpenChange
a callback function, can be executed whether the popup calendar is popped up or closed
function(open)
-
onPanelChange
callback when picker panel mode is changed
function(value, mode)
-
inputReadOnly
Set the readonly attribute of the input tag (avoids virtual keyboard on touch devices)
boolean
false
Common Methods
PropertyDescriptionTypeDefault
blur()
remove focus
focus()
get focus
DatePicker
PropertyDescriptionTypeDefault
defaultValue
to set default date, if start time or end time is null or undefined, the date range will be an open interval
moment
-
defaultPickerValue
to set default picker date
moment
-
disabledTime
to specify the time that cannot be selected
function(date)
-
format
to set the date format, refer to moment.js. When an array is provided, all values are used for parsing and first value is used for formatting.
string | string[]
"YYYY-MM-DD"
renderExtraFooter
render extra footer in panel
(mode) => React.ReactNode
-
showTime
to provide an additional time selection
object|boolean
TimePicker Options
showTime.defaultValue
to set default time of selected date, demo
moment
moment()
showToday
whether to show "Today" button
boolean
true
value
to set date
moment
-
onChange
a callback function, can be executed when the selected time is changing
function(date: moment, dateString: string)
-
onOk
callback when click ok button
function()
-
onPanelChange
Callback function for panel changing
function(value, mode)
-
DatePicker[picker=year]
PropertyDescriptionTypeDefault
defaultValue
to set default date
moment
-
defaultPickerValue
to set default picker date
moment
-
format
to set the date format, refer to moment.js
string
"YYYY"
renderExtraFooter
render extra footer in panel
() => React.ReactNode
-
value
to set date
moment
-
onChange
a callback function, can be executed when the selected time is changing
function(date: moment, dateString: string)
-
DatePicker[picker=quarter]
PropertyDescriptionTypeDefault
defaultValue
to set default date
moment
-
defaultPickerValue
to set default picker date
moment
-
format
to set the date format, refer to moment.js
string
"YYYY-QQ"
renderExtraFooter
render extra footer in panel
() => React.ReactNode
-
value
to set date
moment
-
onChange
a callback function, can be executed when the selected time is changing
function(date: moment, dateString: string)
-
DatePicker[picker=month]
PropertyDescriptionTypeDefault
defaultValue
to set default date
moment
-
defaultPickerValue
to set default picker date
moment
-
format
to set the date format, refer to moment.js
string
"YYYY-MM"
monthCellRender
Custom month cell content render method
function(date, locale): ReactNode
-
renderExtraFooter
render extra footer in panel
() => React.ReactNode
-
value
to set date
moment
-
onChange
a callback function, can be executed when the selected time is changing
function(date: moment, dateString: string)
-
DatePicker[picker=week]
PropertyDescriptionTypeDefault
defaultValue
to set default date
moment
-
defaultPickerValue
to set default picker date
moment
-
format
to set the date format, refer to moment.js
string
"YYYY-wo"
value
to set date
moment
-
onChange
a callback function, can be executed when the selected time is changing
function(date: moment, dateString: string)
-
renderExtraFooter
render extra footer in panel
(mode) => React.ReactNode
-
RangePicker
PropertyDescriptionTypeDefault
allowEmpty
Allow start or end input leave empty
[boolean, boolean]
[false, false]
dateRender
Customize date cell. info argument is added in 4.3.0
function(currentDate: moment, today: moment, info: { range: 'start' | ''end }) => React.ReactNode
-
defaultValue
to set default date
[moment, moment]
-
defaultPickerValue
to set default picker date
[moment, moment]
-
disabled
disable start or end
[boolean, boolean]
-
disabledTime
to specify the time that cannot be selected
function(dates: [moment, moment], partial: 'start'|'end')
-
format
to set the date format, refer to moment.js. When an array is provided, all values are used for parsing and first value is used for formatting.
string | string[]
"YYYY-MM-DD HH:mm:ss"
ranges
preseted ranges for quick selection
{ [range: string]: moment[] } | { [range: string]: () => moment[] }
-
renderExtraFooter
render extra footer in panel
() => React.ReactNode
-
separator
set separator between inputs
string
~
showTime
to provide an additional time selection
object|boolean
TimePicker Options
showTime.defaultValue
to set default time of selected date, demo
moment[]
[moment(), moment()]
value
to set date
[moment, moment]
-
onCalendarChange
a callback function, can be executed when the start time or the end time of the range is changing
function(dates: [moment, moment], dateStrings: [string, string])
-
onChange
a callback function, can be executed when the selected time is changing
function(dates: [moment, moment], dateStrings: [string, string])
-