DateInput #

The DateInput component lets users select a date with the keyboard.

Import #

import { DateInput } from 'rsuite';

Examples #

Basic #

Customize the date format #

Disabled and read only #

Controlled vs. uncontrolled value #

Accessibility #

ARIA properties #

• The DateInput component is the <input type="text"> element.
• When the DateInput component is disabled, the disabled property is added to the <input> element.
• When the DateInput component is read only, the readonly property is added to the <input> element.

Keyboard interactions #

• Use → ← keyboard to navigate to the previous or next date segment.
• Use ↓ ↑ keys to increase and decrease values.
• Use Backspace key to delete selected value.
• Use numeric key to update selected value.

Props #

<DateInput> #

Property	Type(default)	Description
defaultValue	Date	The default value (uncontrolled)
disabled	boolean	Whether disabled the component
format	string ('yyyy-MM-dd')	Format of the date when rendered in the input
onChange	(date: Date, event) => void	Callback fired when value changed
plaintext	boolean	Whether plaintext the component
readOnly	boolean	Whether read only the component
size	'lg'〡'md'〡'sm'〡'xs' ('md')	Date input can have different sizes
value	Date	The selected value. Used when the component is controlled