Introduction Foundations Components Directives Pipes Motion Brand

Alerts & notifications

Buttons & actions

Cards

Forms

Checkbox card Checkbox Currency input Date input Date range calendar File select Input Label Location input Multi select Multiple location input Otp input Phone input Radio Search Segmented date input Select Slider Smart textarea Textarea Timepicker Toggle

Icons / images / media

Layouts

Navigation

Popups / overlays

Progress & loading indicators

Tags

Typography

Components Forms Segmented date input

Segmented date input

Segmented date input

A date input split into separate day, month and year fields, with the calendar as a secondary path rather than the only one.

Contents

Default Bounds Calendar Disabled

Bounds

minDate and maxDate size the year dropdown and bound the calendar. Derive them from the same constants your validators use so the two can't drift apart.

Ascending years

Use yearOrder of ascending for forward-looking dates, where the earliest selectable year is the likelier answer.

Inputs
control : FormControl<Date>
id : string
label ?: string

Labels the group for screen readers, e.g. "Date of birth".

maxDate ?: Date

Latest selectable date. Sizes the year dropdown and bounds the calendar.

minDate ?: Date

Earliest selectable date. Sizes the year dropdown and bounds the calendar.

showCalendarPicker ?: boolean = true

Shows the calendar button as a secondary way to pick a date.

size ?: any = InputSize.MID
yearOrder ?: SegmentedDateInputYearOrder = 'descending'