Date input
Date input
Canary components
Canary components are unstable components that are released for testing purposes.
We value any feedback from users willing to try them in their applications.
These components should not be used in production apps without understanding the risk that changes may occur in order to fix bugs or improve functionality.
For more information on Canary components, read our approach to
Additional details on the props and events for this component can be found in the
Component demo
Interactive example
When to use
Use a date input when asking people for a date they already know or can input without the use of a calendar.
Use a date input to select a past, present or future date. For example, use a date input when asking for a person’s birthday as it may be quicker than navigating through a
![A date input being used to select a birthday](/static/56b3247d00bdf5cfc5e6be424276a8bf/09868/fig-1-do-use-date-input-to-collect-distant-dates.png)
When not to use
Do not use a date input when asking for parts of a date where some elements may not be known. For example, knowing the month and year, but not the day. Instead, consider using three separate fields for date, month and year, and set all to optional.
![Three separate date inputs being used to capture day month and year independently.](/static/7d0ef5b542f01e674c13b5a624fd4982/1c867/fig-2-do-use-seperate-date-input-when-capturing-partial-dates.png)
Content
Labels
Use
Helper text
Use helper text to provide additional information.
![An example of the benefits of using helper text in a date input.](/static/b5710649c0eff747ad8ea4c3504dbe01/5444c/fig-3-with-helper-text.png)
Date formatting
Use the date inputdateFormat
property to change the default input format between DD/MM/YYYY, MM/DD/YYYY and YYYY/MM/DD. Use differing labels on the helper text and within a date input, when catering for regional input preferences.
Interaction behaviour
Use thedisablePast
property when using date input to gather information about future dates, such as hotel bookings.
Use thedisableFuture
property when using a date input to gather information about days in the past, such as birthdays.
Set the default date on a date input to help people quickly complete the input by sticking with the default value. For example, set the default date to the next available delivery date when asking for a delivery date preference.
Do not use default date when using date input to collect a date far in the past. For example, do not use “now” as default when asking for date of birth. Instead, use placeholder text of date format until the user selects their input.
Usehtml autofocus
to automatically focus a date input when it is the only input on a page.
Do not usehtml autofocus
on a date input when it is part of a form with other inputs.
You can copy and paste a complete date into the date input.
Sizing
Use the date input size properties to change its vertical size and achieve compact or spacious layouts.
![A date input matching the height of the button component next to it.](/static/eb31b9dd853f4564f7c609019d6a4bea/a9dad/fig-5-adjust-input-size-to-match-other-form-components.png)
![A date input that is larger than the button component it is next to.](/static/97d431d7411be0ea23a9c65bc4a5a07b/a9dad/fig-6-dont-use-mixed-size-components.png)
Width
Ensure the width of the date input allows enough space for the full length of a person’s potential input.
![A date input matching the width of its expected input.](/static/1e1233eeb5435650cb73c97ff0e8d326/caa11/fig-7-short-date-input-width.png)
![A date input matching the width of other elements in a form.](/static/481566ad420a0a7cd088d76ba7b582ef/caa11/fig-8-matched-date-input-width.png)
![A date input matching the width of a much longer form element.](/static/bfc3431cda67a6263063bb0b48ebdb04/8e34d/fig-9-excessive-matched-date-input-width.png)
Validation
Use validation on input fields to tell people when any warning or errors occur within their input. The date input component offers some standard validation scenarios as well as a method for creating custom validation scenarios.
Use the custom validation options to configure your own validation scenarios. For example, if it is required that the input date must be after another specific date then use an error validation message if the input date doesn’t meet the condition.
Use error, warning or success validation messages according to the validation scenario.
Use error messaging when the person can’t proceed without fixing their input, and use a warning message when the input can be used, but may not be expected. For example, when capturing a date of birth, show a warning message if it would indicate the person being unreasonably old, such as with 01/01/1880.
![A date input showing the successful validation of an input.](/static/9b231de7aa0061bcd6e04eb00d285654/9e307/fig-10-success-validation.png)
![A date input correctly displaying an invalid entry errored state.](/static/d1bf4a106b37769d4661bd0ba62c6ea2/9e307/fig-11-error-validation-correct.png)