DatePicker
To select or input a date or time
When you need to select a date range, it is recommended to use
<DateRangePicker>
Usage
import { DatePicker } from 'rsuite';
// or
import DatePicker from 'rsuite/lib/DatePicker';
Examples
Default
Size
One tap
Appearance
Block
Placeholder
Date and time
Show month
Show time
Meridian format
Display hours in 12 format.
ISO week
International Standard ISO 8601 defines that each calendar week begins on Monday and Sunday is the seventh day, ISO week date.
The calendar panel can be displayed in ISO standard via the ʻisoWeek` property setting.
Disabled and read only
Set the local language
DatePicker
supports local language custom configuration, but we recommend using the unified internationalization configuration.
Placement
Tip: When set to
auto*
, try to scroll the page, or change the browser size, it will automatically appear in the right place.
Custom short options
Clicking "The day before" in the example does not close the picker layer because the closeOverlay:boolean
property is configured. This propperty is used to set whether to close the picker layer after clicking the shortcut item. The default value is true
.
Controlled
Selection range
Show week numbers
Native pickers
If you only need to meet the simple date selection function, you can use the native pickers supported by the browser.
Accessibility
Learn more in Accessibility.
Props
<DatePicker>
Property | Type(default) |
Description |
---|---|---|
appearance | enum: 'default' | 'subtle' ('default') |
Set picker appearence |
block | boolean | Blocking an entire row |
calendarDefaultDate | Date | Calendar panel default presentation date and time |
cleanable | boolean (true) |
Whether the selected value can be cleared |
container | HTMLElement | (() => HTMLElement) | Sets the rendering container |
defaultOpen | boolean | Default value of open property |
defaultValue | Date | Default value |
disabled | boolean | Whether disabled the component |
disabledDate | (date:Date) => boolean | Disabled date |
disabledHours | (hour:number, date:Date) => boolean | Disabled hours |
disabledMinutes | (minute:number, date:Date) => boolean | Disabled minutes |
disabledSeconds | (second:number, date:Date) => boolean | Disabled seconds |
format | string ('yyyy-MM-dd') |
Format date |
hideHours | (hour:number, date:Date) => boolean | Hidden hours |
hideMinutes | (minute:number, date:Date) => boolean | Hidden minutes |
hideSeconds | (second:number, date:Date) => boolean | Hidden seconds |
inline | boolean | Display date panel when component initial |
isoWeek | boolean | ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day |
limitEndYear | number (1000) |
Set the lower limit of the available year relative to the current selection date |
locale | object | i18n config |
onChange | (date: Date) => void | Callback fired when value changed |
onChangeCalendarDate | (date: Date, event) => void | Callback function that changes the calendar date. |
onClean | (event) => void | Callback fired when value clean |
onClose | () => void | Callback fired when close component |
onEnter | () => void | Callback fired before the overlay transitions in |
onEntered | () => void | Callback fired after the overlay finishes transitioning in |
onEntering | () => void | Callback fired as the overlay begins to transition in |
onExit | () => void | Callback fired right before the overlay transitions out |
onExited | () => void | Callback fired after the overlay finishes transitioning out |
onExiting | () => void | Callback fired as the overlay begins to transition out |
onNextMonth | (date: Date) => void | Switch to the callback function for the next Month |
onOk | (date: Date, event) => void | Click the OK callback function |
onOpen | () => void | Callback fired when open component |
onPrevMonth | (date: Date) => void | Switch to the callback function for the previous Month |
onSelect | (date: Date) => void | Callback fired when date or time is selected |
onToggleMonthDropdown | (open: boolean) => void | Callback function that switches to the month view |
onToggleTimeDropdown | (open: boolean) => void | Callback function that switches to the time view |
oneTap | boolean | One click to complete the selection date |
open | boolean | Whether open the component |
placeholder | string | Placeholder |
placement | Placement ('bottomStart') |
The placement of component |
preventOverflow | boolean | Prevent floating element overflow |
ranges | Range[] (Ranges) |
Shortcut config |
showMeridian | boolean | Display hours in 12 format |
showWeekNumbers | boolean | Whether to show week numbers |
size | enum: 'lg' | 'md' | 'sm' | 'xs' ('md') |
A picker can have different sizes |
timeZone | string | IANA Time zone name |
toggleAs | ElementType ('a') |
You can use a custom element for this component |
value | Date | Value (Controlled) |
Default
Ranges
const Ranges = [
{
label: 'today',
value: new Date(),
closeOverlay: true
},
{
label: 'yesterday',
value: dateFns.addDays(new Date(), -1),
closeOverlay: true
}
];
Time Zone
Time Zone Tips
The timeZone
property in principle only affects the UI display to facilitate the user to select the time or date in the specified time zone, and does not affect the date
object returned by the component other APIs to the outer component.
For example:
disabledDate: (date: Date) => boolean
property, after setting thetimeZone
property, thedate
object passed in by thedisabledDate
property callback is still based on the corresponding time in the current time zone, not the specified time zone.