Free form date input
DateInput supports most of the DatePicker props. Read through the DatePicker documentation to learn about all component features that are not listed on this page.
Use the presets prop to add custom date presets. Presets are displayed next to the calendar:
Use the valueFormat prop to change the dayjs format of the value label. To use some custom formats, you need to enable the custom parse format plugin:
Example of using DateInput with a custom format:
valueFormat also accepts a function that receives the value as a YYYY-MM-DD string and returns the formatted value. Use it to format the value with Intl.DateTimeFormat instead of dayjs – see formatting without dayjs .
Note that valueFormat is also used to parse user input – a function cannot be used for that. When valueFormat is a function, typed values are parsed as YYYY-MM-DD strings. Set the dateParser prop to support other formats:
If your valueFormat includes time (for example, YYYY-MM-DD HH:mm ), set the withTime prop to preserve the time part of the value. Without withTime , the time portion is discarded and always defaults to 00:00 . When using withTime , you will also need to provide a custom dateParser that returns a date-time string:
Use the dateParser prop to replace the default date parser. The parser function accepts user input (string) and must return a Date object:
Set the clearable prop to allow removing the value from the input. The input will be cleared if the user selects the same date in the dropdown or clears the input value:
The clearSectionMode prop determines how the clear button and rightSection are rendered:
Set the minDate and maxDate props to define minimum and maximum dates. If a date that is after maxDate or before minDate is entered, it will be considered invalid and the input value will be reverted to the last known valid date value.
DateInput component supports Input and Input.Wrapper component features and all input element props. The DateInput documentation does not include all features supported by the component – see the Input documentation to learn about all available features.
If DateInput is used without the label prop, it will not be announced properly by screen readers:
Set aria-label to make the input accessible. In this case the label will not be visible, but screen readers will announce it:
If the label prop is set, the input will be accessible and it is not required to set aria-label :
InlineDateTimePicker