Segmented date input
Date input split into day, month and year fields, with a calendar as backup
Contents
Segmented date input lets users enter a date as separate day, month and year fields, with a calendar as a secondary way to pick it. Use it instead of the date input (fl-input [type]="InputType.DATE") for dates far from today, such as dates of birth, where paging a calendar back to the right year is slow.
Day field
A numeric text field for the day of the month, up to two digits.
Month field
A dropdown of the months.
Year field
A native dropdown of years, sized by minDate and maxDate. Typing a year such as 1965 while it is focused jumps straight to it, and mobile shows a native wheel picker.
Calendar button (optional)
Opens a calendar as a secondary way to pick the date. Shown by default; hide it with showCalendarPicker.
The order of the day, month and year fields follows the locale's date format.
Day clamping
The day field clamps rather than erroring: typing 31 and then picking February leaves 29 if no year is selected yet (a leap year is assumed until told otherwise, so a real day-29 entry is never lost), or 28 once a non-leap year is picked. Clamping only ever shrinks the day, so picking a leap year afterwards won't move it back up under the user.
Pasting a date
Pasting a date into the day field fills all three fields, parsed against the locale's short date format. A paste it can't read behaves like a normal paste.
Backspace
Backspace on an empty field moves focus to the previous one, so a date can be deleted backwards without reaching for Shift+Tab.
Calendar
The calendar has month and year dropdowns, not Material's period button and 24-year grid. Its arrows only step a month, and its year list comes from the same minDate and maxDate and honours the same yearOrder, so the two year lists can never disagree.
The bound control keeps the same Date | null value a datepicker gives it, so the usual required, dateFormat, minDate and maxDate validators work unchanged.
| Field state | Control value | Reported by |
|---|---|---|
| Nothing entered | null | required |
| Partially entered | An invalid Date | dateFormat |
| Fully entered | A real Date | minDate / maxDate |
Always bind minDate and maxDate
They size the year dropdown and bound the calendar. Without them the year list falls back to the last 120 years.
Use it for dates far from today
For dates close to today the date input's calendar is usually quicker. Use segmented date input when the date could be years away, such as a date of birth.