Date Input

Release candidate

DateInputSingle and DateInputRange provides an editable field where users can enter a single date or a date range. Currently all date based controls, need to be wrapped in a LocalizationProvider

Also known as: DateInputSingle, DateInputRange

View source code

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Best practices

Wrap DateInputSingle and DateInputRange in FormField to provide the field with a visible label, help text, and a status message for validation feedback. This will ensure it complies with accessibility guidelines. You can find more information in the W3C form instructions.
The components clip text that extends beyond their visible area. All states have the same behavior—default, read-only, and disabled—whether or not the input has focus. To view the text in its entirety, the user can traverse the characters using the cursor.

For accessibility purposes, we recommend you use the emptyReadOnlyMarker prop to add a marker for empty read-only fields. This ensures it’s clear that a value is not necessary for the current selection or configuration.

Show code

Keyboard interactions

Key	Function
`Tab`	If focus is above the input, Tab moves focus onto the input and highlights the text. If the input area is empty, Tab displays a text cursor in the input area. - If the input is disabled, Tab skips the input. - If the input has focus, Tab moves focus out of the input, to the next focusable component in the tab order.
`Shift` + `Tab`	If focused, Shift + Tab moves focus out of the component to the previous component in the tab order.
`Enter`	If an interactive adornment, e.g., a button, has focus, Enter activates the element.
`Space`	When the input area has focus, Space inserts a character at the position of the text cursor. - If an interactive adornment, e.g., a button, has focus, Space activates the element.
`Right Arrow`	When the input area has focus: - If text is highlighted, the highlight is removed and the text cursor is positioned at the right edge of the highlight. - If the text cursor is displayed, it is positioned on the alternative side of the following character. If there is no following character, there is no effect.
`Left Arrow`	When the input area has focus: - If text is in a highlighted state, Left Arrow removes the highlight and positions the text cursor at the left edge of the highlight. - If the text cursor is visible, Left Arrow positions it on the alternative side of the preceding character. If there's no preceding character, there's no effect.
`Shift` + `Left Arrow` / `Shift` + `Right Arrow`	When the input area has focus, drags selection over text characters, one at a time.
`Backspace`	When the input area has focus and: - Text is highlighted, this action removes all highlighted characters. - The text cursor is positioned to the right of text, this action removes the preceding character.
`Alphanumeric` / `Special keys`	When the input area has focus, this action inserts the relevant character at the position of the text cursor.
`Control` + `A` / `Command` + `A`	This action highlights all strings within the field.

Best practices

Wrap DateInputSingle and DateInputRange in FormField to provide the field with a visible label, help text, and a status message for validation feedback. This will ensure it complies with accessibility guidelines. You can find more information in the W3C form instructions.
The components clip text that extends beyond their visible area. All states have the same behavior—default, read-only, and disabled—whether or not the input has focus. To view the text in its entirety, the user can traverse the characters using the cursor.

Empty read-only marker

Show code

Keyboard interactions

Key	Function
`Tab`	If focus is above the input, Tab moves focus onto the input and highlights the text. If the input area is empty, Tab displays a text cursor in the input area. - If the input is disabled, Tab skips the input. - If the input has focus, Tab moves focus out of the input, to the next focusable component in the tab order.
`Shift` + `Tab`	If focused, Shift + Tab moves focus out of the component to the previous component in the tab order.
`Enter`	If an interactive adornment, e.g., a button, has focus, Enter activates the element.
`Space`	When the input area has focus, Space inserts a character at the position of the text cursor. - If an interactive adornment, e.g., a button, has focus, Space activates the element.
`Right Arrow`	When the input area has focus: - If text is highlighted, the highlight is removed and the text cursor is positioned at the right edge of the highlight. - If the text cursor is displayed, it is positioned on the alternative side of the following character. If there is no following character, there is no effect.
`Left Arrow`	When the input area has focus: - If text is in a highlighted state, Left Arrow removes the highlight and positions the text cursor at the left edge of the highlight. - If the text cursor is visible, Left Arrow positions it on the alternative side of the preceding character. If there's no preceding character, there's no effect.
`Shift` + `Left Arrow` / `Shift` + `Right Arrow`	When the input area has focus, drags selection over text characters, one at a time.
`Backspace`	When the input area has focus and: - Text is highlighted, this action removes all highlighted characters. - The text cursor is positioned to the right of text, this action removes the preceding character.
`Alphanumeric` / `Special keys`	When the input area has focus, this action inserts the relevant character at the position of the text cursor.
`Control` + `A` / `Command` + `A`	This action highlights all strings within the field.

Best practices

Wrap DateInputSingle and DateInputRange in FormField to provide the field with a visible label, help text, and a status message for validation feedback. This will ensure it complies with accessibility guidelines. You can find more information in the W3C form instructions.
The components clip text that extends beyond their visible area. All states have the same behavior—default, read-only, and disabled—whether or not the input has focus. To view the text in its entirety, the user can traverse the characters using the cursor.

Empty read-only marker

Show code

Keyboard interactions

Key	Function
`Tab`	If focus is above the input, Tab moves focus onto the input and highlights the text. If the input area is empty, Tab displays a text cursor in the input area. - If the input is disabled, Tab skips the input. - If the input has focus, Tab moves focus out of the input, to the next focusable component in the tab order.
`Shift` + `Tab`	If focused, Shift + Tab moves focus out of the component to the previous component in the tab order.
`Enter`	If an interactive adornment, e.g., a button, has focus, Enter activates the element.
`Space`	When the input area has focus, Space inserts a character at the position of the text cursor. - If an interactive adornment, e.g., a button, has focus, Space activates the element.
`Right Arrow`	When the input area has focus: - If text is highlighted, the highlight is removed and the text cursor is positioned at the right edge of the highlight. - If the text cursor is displayed, it is positioned on the alternative side of the following character. If there is no following character, there is no effect.
`Left Arrow`	When the input area has focus: - If text is in a highlighted state, Left Arrow removes the highlight and positions the text cursor at the left edge of the highlight. - If the text cursor is visible, Left Arrow positions it on the alternative side of the preceding character. If there's no preceding character, there's no effect.
`Shift` + `Left Arrow` / `Shift` + `Right Arrow`	When the input area has focus, drags selection over text characters, one at a time.
`Backspace`	When the input area has focus and: - Text is highlighted, this action removes all highlighted characters. - The text cursor is positioned to the right of text, this action removes the preceding character.
`Alphanumeric` / `Special keys`	When the input area has focus, this action inserts the relevant character at the position of the text cursor.
`Control` + `A` / `Command` + `A`	This action highlights all strings within the field.