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

With calendar

The calendar button opens a picker whose header is month and year dropdowns rather than Material's period button and 24-year grid, so the arrows only ever step a month. Picking a date fills all three segments.

Without calendar

Set showCalendarPicker to false in tight layouts where the segments are enough on their own.

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'