Basic
A basic date picker with built-in month and year selection.
Icons
Icons by @ng-icons/tabler-icons
The component library does not provide icons.
Component Blueprint
Date Picker
Calendar-backed date and range picker with presets, editable input, time selection, RTL, and reactive forms support.
02 Usage
TS
import { FormControl } from '@angular/forms';
readonly date = new FormControl<Date | null>(new Date());HTML
<frame-date-picker [formControl]="date" />03 Examples
Range Picker
Use range mode with two visible months for selecting start and end dates.
Date of Birth
Constrain the available year range for birthday-style selection.
Input
Set `editable` when users should be able to type a date as well as pick it from the calendar.
Type YYYY-MM-DD or pick from the calendar.
Time Picker
Set `showTime` to preserve hours and minutes on the selected Date value.
Reactive Forms Validation
Use Date Picker directly with Angular validators such as `Validators.required`.
Required date picker using Angular reactive forms.
Custom Navigation
Pass custom previous and next templates through Date Picker to customize the underlying calendar navigation buttons.
Presets
Preset buttons can set absolute values or lazily compute values such as today, tomorrow, and relative offsets.
RTL
The trigger, overlay, and calendar inherit direction and locale configuration.
05 Token Inspector
Inspect the date picker panel surface, presets, calendar, and optional time input.
July 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
06 Design Tokens
Date picker tokens style the trigger and overlay shell. The inner calendar keeps using the existing calendar token contract.
SCSS
--frame-date-picker-trigger-height: 2.5rem;
--frame-date-picker-trigger-width: 17.5rem;
--frame-date-picker-trigger-padding: 0 0.75rem;
--frame-date-picker-trigger-gap: 0.5rem;
--frame-date-picker-trigger-radius: var(--frame-radius-md);
--frame-date-picker-trigger-bg: var(--frame-background);
--frame-date-picker-trigger-color: var(--frame-foreground);
--frame-date-picker-trigger-border: var(--frame-border);
--frame-date-picker-trigger-hover-border: color-mix(in srgb, var(--frame-ring) 42%, var(--frame-border));
--frame-date-picker-trigger-placeholder-color: var(--frame-muted-foreground);
--frame-date-picker-trigger-disabled-opacity: 0.5;
--frame-date-picker-trigger-invalid-border: var(--frame-destructive);
--frame-date-picker-trigger-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 26%, transparent);
--frame-date-picker-content-bg: var(--frame-surface);
--frame-date-picker-content-color: var(--frame-surface-foreground);
--frame-date-picker-content-border: var(--frame-border);
--frame-date-picker-content-radius: var(--frame-radius-lg);
--frame-date-picker-content-shadow: var(--frame-shadow-md);
--frame-date-picker-content-padding: 0.25rem;
--frame-date-picker-presets-border: var(--frame-border);
--frame-date-picker-preset-height: 2rem;
--frame-date-picker-preset-radius: var(--frame-radius-md);
--frame-date-picker-preset-hover-bg: var(--frame-muted);
--frame-date-picker-time-border: var(--frame-border);
--frame-date-picker-time-padding: 0.75rem;
--frame-date-picker-motion-duration: 140ms;
--frame-date-picker-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);