date-input.mdx

import { DateInputDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.DateInput);

DatePicker props

DateInput supports most of the DatePicker props, read through DatePicker documentation to learn about all component features that are not listed on this page.

Usage

Value format

Use valueFormat prop to change dayjs format of value label:

With time

Include time in valueFormat to allow hours, minutes and seconds to be entered:

Date parser

Use dateParser prop to replace default date parser. Parser function accepts user input (string) and must return Date object:

Allow clear

Set clearable prop to allow removing value from the input. Input will be cleared if user selects the same date in dropdown or clears input value:

Min and max date

Set minDate and maxDate props to define min and max dates. If date that is after maxDate or before minDate is entered, then it will be considered invalid and input value will be reverted to last known valid date value.

Disabled state

Input props