ComponentsForm Controls

Date Time Picker

Form Controls components with live demos, API references, and tokens.

One family for calendar and wall-clock selection

PMatDateTimePicker supports nine typed field modes. PMatCalendar, PMatDateFilter, and PMatDatePresetSelector complete the twelve common date selection variants without Angular CDK or a date library.

Choose an available service date.
HTML

Adaptive root overlay

Desktop popoverStarts below and flips above, after, or before when space is limited.
Mobile modalCoarse pointers and narrow screens receive a touch-sized modal that follows the visual viewport.
No z-index trapThe panel moves beneath the document body, copies theme tokens, and locks background scrolling.
Safe dismissalBackdrop, Escape, Cancel, focus trapping, and focus restoration are built in.

Typed model shapes

VariantMode / componentModel
Date PickerdateDate | null
Time PickertimePMatTime | null
Date Range Pickerdate-rangePMatRange<Date>
Date Time Pickerdate-timePMatDateTime<Date>
Time Range Pickertime-rangePMatRange<PMatTime>
Date Time Rangedate-time-rangePMatRange<PMatDateTime<Date>>
Month / Year / Weekmonth, year, weekTyped month, number, or ISO week
Calendar / Filter / PresetStandalone componentsMode-compatible values and filter expressions