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 Date input

Date input

A text input that picks a date or a date range from a calendar

Contents

Default
Compact date input
Disabled

Date range

Used to select two dates while staying in the same context.

–

Min and max dates

You can set min/max dates to restrict the date range that can be selected.

–
Inputs in Date range
maxDate ?: Date

Maximum selectable date for the datepicker.

minDate ?: Date

Minimum selectable date for the datepicker.

Also set in this example
control : FormControl<T>
type : IsAny<T> extends true ? any : [T] extends [Date] ? DateInputType.DATE : [T] extends [any] ? DateInputType.DATERANGE : never

Whether the field picks a single date or a date range. A `FormControl<Date>` accepts `DATE`; a `FormControl<DateRange>` accepts `DATERANGE`, which renders separate start and end fields.

Outputs
iconEndClick ?: any = new EventEmitter<MouseEvent>()
iconStartClick ?: any = new EventEmitter<MouseEvent>()
onBlur ?: any = new EventEmitter<void>()
onFocus ?: any = new EventEmitter<void>()