The datepicker allows users to type in a date or select a date from a calendar. The component parses the date into ISO format and exposes it through its
value property, just like the native input. It has built-in date validations and will display an error if the user types a date that does not exist or that is in the wrong format. The component can also display a customized error message if the date fails an external validation performed by the app.
* Required property
label-positionis set to
none(for accessibility reasons).
top | left | none
top. Set this property to
noneif no label should be displayed.
truewill display a red asterisk next to the label to indicate it is required. Defaults to
US | INT | ISO
USand the user enters 20/1/2020, the component will display an error message prompting the user to correct the date. Defaults to
valueattribute will be updated when the user enters or selects a date, just like any native input. The component expects the
valueto be in ISO format and will update it in ISO format. If no
valueis initially set or an empty string is passed, the input will display the date format as a placeholder in the input (as mm/dd/yyyy, dd/mm/yyyy, or yyyy/mm/dd, depending on the value of
Usage in HTML
Edit the code below to see changes reflected in the example above.
Usage in Elm
Code generated from HTML.
|Tab||Focuses the calendar button.|
|Shift + Tab||Focuses the input field.|
|SpaceEnterDown Arrow||Opens calendar to the month and year entered in the input and focuses the corresponding date. If the input field is blank, the calendar opens to the current month and year, and today's date is focused.|
Calendar—Date Selection View
|Up Arrow||Focuses date in the same column of the row above (same day of previous week). If that date is not in the displayed month, the previous month is brought into view before the date is focused.|
|Down Arrow||Focuses date in the same column of the row below (same day of next week). If that date is not in the displayed month, the next month is brought into view before the date is focused.|
|Home||Focuses first of the month.|
|End||Focuses last date of the month.|
|Tab||Moves focus clockwise from date in focus to previous button, to month-year button, to next button, and back to date.|
|Shift + Tab||Moves focus counter-clockwise from date in focus to next button, to month-year button, to previous button, and back to date.|
Calendar—Month Selection View
|Up Arrow||Focuses month in the same column of the row above. If a month in the top row is focused, focus moves to month in the same column of the bottom row.|
|Down Arrow||Focuses month in the same column of the row below. If the month was in the bottom row, focus moves to month in the same column of the first row.|
|Tab||Moves focus clockwise from month in focus to previous button, to year button, to next button, and back to month.|
|Shift + Tab||Moves focus counter-clockwise from month in focus to next button, to year button, to previous button, and back to month.|
prevent validation prop is used with a specific use-case in mind.
When components that feature required fields are initally focused within a modal, closing the modal will flash the required error.
prevent validation prop is useful in this case, where the close button's id can be passed through preventing the validation flash.