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

Default

Day, month and year as separate fields. The segments render in the order the active locale writes dates in, so an MM/dd/yyyy locale leads with the month.

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'