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 the timeZone property, the date object passed in by the disabledDate property callback is still based on the corresponding time in the current time zone, not the specified time zone.