DatePicker
Date picker allow users select a date by from a popup calendar.
Basic
Typical usage DatePicker component.
Range picker
Typical usage RangePicker component.
Date time picker
Combination of
<DatePicker /> & <TimeInput />Controlled
Controlled usage with
<DatePicker /> & <DatePickerRange />Format
Picker allow us to set custom both date format for input & picker via
inputFormat & labelFormat props.Input format:
Inner label format:
Custom Render
You can render custom day elements or apply styles & className to days with these
dayStyle, dayClassName & renderDay props.Disable out of period date
Setting
minDate & maxDate props to limit available date within a period.Disabled certain date
Disabled part of dates by using
disabledDate prop callback.Multiple date view
We can have mutiple date view by setting
dateViewCount more than 1.Disabled Input
Use
disabled prop to disable user expand DatePicker.Inputtable
Release input lock to let user enter the date manually.
Input Size
DatePicker allow us to control the input size via
size prop.Input Affix
inputSuffix or inputPrefix allow us to customize input affix content.Prefix:
Suffix:
Clear Button
You can customize the clear button via
clearable or clearButton props.No clear button:
Custom clear button:
Localization
DatePicker receive locale value from
<ConfigProvider />, but there is also an option to input locale manually.API
DatePicker
| Prop | Description | Type | Default |
|---|---|---|---|
| clearable | Whether allow to clear value | boolean | true |
| clearButton | Custom clear button | string | ReactNode | ReactNode |
| closePickerOnChange | Whether close picker upon date selected | boolean | true |
| dateViewCount | Amount of date view display in picker | number | 1 |
| dayClassName | Apply className to days based on argument | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string | - |
| dayStyle | Apply style to days based on argument | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties | - |
| defaultValue | Default value of DatePicker (use value instead if it is controlled) | Date | - |
| defaultMonth | Default month for uncontrolled DatePicker | Date | - |
| defaultOpen | Whether to default open DatePicker | boolean | false |
| defaultView | Default DatePicker view | 'date' | 'month' | 'year' | 'date' |
| disabled | Determine whether DatePicker Input is disabled | boolean | false |
| disabledDate | Specify the date that cannot be selected | (date: Date) => boolean | - |
| disableOutOfMonth | Whether to disable days that out of given month | boolean | false |
| enableHeaderLabel | Enable header label to trigger view change | boolean | true |
| firstDayOfWeek | First day of week | 'sunday' | 'monday' | 'monday' |
| hideOutOfMonthDates | Whether to hide days that out of given month | boolean | false |
| hideWeekdays | Whether to hide week days | boolean | false |
| inputFormat | DatePicker Input display format | string | 'YYYY-MM-DD' |
| inputPrefix | Render a prefix content inside DatePicker Input | string | ReactNode | - |
| inputSuffix | Render a suffix content inside DatePicker Input | string | ReactNode | - |
| inputtable | Whether to allow input typing | boolean | false |
| labelFormat | Whether to allow input typing | {month: string, year: string} | {month: 'MMM', year: 'YYYY'} |
| locale | DatePicker locale | dayjs locale | en |
| maxDate | Maximum date to select | Date | - |
| minDate | Minimum date to select | Date | - |
| monthLabelFormat | Month label format | string | 'YYYY' |
| onBlur | Callback when DatePicker Input blur-sm | function(event: Event) | - |
| onChange | Callback when date cell is selected | function(date: Date) | - |
| onDayMouseEnter | Callback when date is hovered | function(date: Date) | - |
| onFocus | Callback when DatePicker Input focus | function(event: Event) | - |
| onDropdownClose | Callback when DatePicker close | () => void | - |
| onDropdownOpen | Callback when DatePicker open | () => void | - |
| openPickerOnClear | Whether to open DatePicker upon clear value | boolean | false |
| range | Highlight given date range | [Date | null, Date | null] | - |
| renderDay | Render custome day element based on the given params | (date: Date) => ReactNode | false |
| size | DatePicker input size | 'sm' | 'md' | 'lg' | 'md' |
| value | Value of DatePicker (Controlled) | Date | - |
| weekdayLabelFormat | Format for weekday display | string | 'dd' |
| weekendDays | Indicate the days of weekend | number[] | [0, 6] |
| yearLabelFormat | Year label format | string | 'YYYY' |
DatePicker.DatePickerRange
| Prop | Description | Type | Default |
|---|---|---|---|
| clearable | Whether allow to clear value | boolean | true |
| clearButton | Custom clear button | string | ReactNode | ReactNode |
| closePickerOnChange | Whether close picker upon date selected | boolean | true |
| dateViewCount | Amount of date view display in picker | number | 1 |
| dayClassName | Apply className to days based on argument | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string | - |
| dayStyle | Apply style to days based on argument | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties | - |
| defaultValue | Default value of DatePickerRange (use value instead if it is controlled) | Date | - |
| defaultMonth | Default month for uncontrolled DatePickerRange | Date | - |
| defaultOpen | Whether to default open DatePickerRange | boolean | false |
| defaultView | Default DatePickerRange view | 'date' | 'month' | 'year' | 'date' |
| disabled | Determine whether DatePickerRange Input is disabled | boolean | false |
| disabledDate | Specify the date that cannot be selected | (date: Date) => boolean | - |
| disableOutOfMonth | Whether to disable days that out of given month | boolean | false |
| enableHeaderLabel | Whether to disable header label to trigger view change | boolean | true |
| firstDayOfWeek | First day of week | 'sunday' | 'monday' | 'monday' |
| hideOutOfMonthDates | Whether to hide days that out of given month | boolean | false |
| hideWeekdays | Whether to hide week days | boolean | false |
| inputFormat | DatePickerRange Input display format | string | 'YYYY-MM-DD' |
| inputPrefix | Render a prefix content inside DatePickerRange Input | string | ReactNode | - |
| inputSuffix | Render a suffix content inside DatePickerRange Input | string | ReactNode | - |
| inputtable | Whether to allow input typing | boolean | false |
| inputtableBlurClose | Whether to close DatePicker upon input (only work when inputtable is true) | boolean | true |
| labelFormat | Seperator between date display on input | string | '~' |
| locale | DatePickerRange locale | dayjs locale | en |
| maxDate | Maximum date to select | Date | - |
| minDate | Minimum date to select | Date | - |
| monthLabelFormat | Month label format | string | 'YYYY' |
| onChange | Callback when date cell is selected | function(date: Date) | - |
| onDayMouseEnter | Callback when date is hovered | function(date: Date) | - |
| onDropdownClose | Callback when DatePickerRange close | () => void | - |
| onDropdownOpen | Callback when DatePickerRange open | () => void | - |
| openPickerOnClear | Whether to open DatePickerRange upon clear value | boolean | false |
| range | Highlight given date range | [Date | null, Date | null] | - |
| renderDay | Render custome day element based on the given params | (date: Date) => ReactNode | false |
| separator | Seperator between dates | string | '~' |
| size | DatePickerRange input size | 'sm' | 'md' | 'lg' | 'md' |
| singleDate | Only one date can be selected | boolean | false |
| value | Value of DatePickerRange (Controlled) | [Date | null, Date | null] | - |
| weekdayLabelFormat | Format for weekday display | string | 'dd' |
| weekendDays | Indicate the days of weekend | number[] | [0, 6] |
| yearLabelFormat | Year label format | string | 'YYYY' |
DatePicker.DateTimepicker
| Prop | Description | Type | Default |
|---|---|---|---|
| amPm | Whether to set time input to 12 hours format | boolean | true |
| clearable | Whether allow to clear value | boolean | true |
| clearButton | Custom clear button | string | ReactNode | ReactNode |
| closePickerOnChange | Whether close picker upon date selected | boolean | false |
| dateViewCount | Amount of date view display in picker | number | 1 |
| dayClassName | Apply className to days based on argument | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string | - |
| dayStyle | Apply style to days based on argument | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties | - |
| defaultValue | Default value of DateTimepicker (use value instead if it is controlled) | Date | - |
| defaultMonth | Default month for uncontrolled DateTimepicker | Date | - |
| defaultOpen | Whether to default open DateTimepicker | boolean | false |
| defaultView | Default DateTimepicker view | 'date' | 'month' | 'year' | 'date' |
| disabled | Determine whether DateTimepicker Input is disabled | boolean | false |
| disabledDate | Specify the date that cannot be selected | (date: Date) => boolean | - |
| disableOutOfMonth | Whether to disable days that out of given month | boolean | false |
| enableHeaderLabel | Whether to disable header label to trigger view change | boolean | true |
| firstDayOfWeek | First day of week | 'sunday' | 'monday' | 'monday' |
| hideOutOfMonthDates | Whether to hide days that out of given month | boolean | false |
| hideWeekdays | Whether to hide week days | boolean | false |
| inputFormat | DateTimepicker Input display format | string | 'YYYY-MM-DD' |
| inputPrefix | Render a prefix content inside DateTimepicker Input | string | ReactNode | - |
| inputSuffix | Render a suffix content inside DateTimepicker Input | string | ReactNode | - |
| labelFormat | Whether to allow input typing | {month: string, year: string} | {month: 'MMM', year: 'YYYY'} |
| locale | DateTimepicker locale | dayjs locale | en |
| maxDate | Maximum date to select | Date | - |
| minDate | Minimum date to select | Date | - |
| monthLabelFormat | Month label format | string | 'YYYY' |
| okButtonContent | Ok button content | string | ReactNode | 'ok' |
| onBlur | Callback when DateTimepicker Input blur-sm | function(event: Event) | - |
| onChange | Callback when date cell is selected | function(date: Date) | - |
| onDayMouseEnter | Callback when date is hovered | function(date: Date) | - |
| onFocus | Callback when DateTimepicker Input focus | function(event: Event) | - |
| onDropdownClose | Callback when DateTimepicker close | () => void | - |
| onDropdownOpen | Callback when DateTimepicker open | () => void | - |
| openPickerOnClear | Whether to open DateTimepicker upon clear value | boolean | false |
| range | Highlight given date range | [Date | null, Date | null] | - |
| renderDay | Render custome day element based on the given params | (date: Date) => ReactNode | false |
| size | DateTimepicker input size | 'sm' | 'md' | 'lg' | 'md' |
| value | Value of DateTimepicker (Controlled) | Date | - |
| weekdayLabelFormat | Format for weekday display | string | 'dd' |
| weekendDays | Indicate the days of weekend | number[] | [0, 6] |
| yearLabelFormat | Year label format | string | 'YYYY' |