Date Picker

Calendar-backed date and range picker with presets, editable input, time selection, RTL, and reactive forms support.

Preview

Usage

import { FormControl } from '@angular/forms';

readonly date = new FormControl<Date | null>(new Date());

HTML

<frame-date-picker [formControl]="date" />

Examples

Basic

A basic date picker bound to an Angular reactive form control.

Range Picker

Use range mode with two visible months for selecting start and end dates.

Date of Birth

Use the dropdown caption layout and a constrained year range for birthday-style selection.

Date of birth

Input

Set `editable` when users should be able to type a date as well as pick it from the calendar.

Subscription Date

Type YYYY-MM-DD or pick from the calendar.

Time Picker

Set `showTime` to preserve hours and minutes on the selected Date value.

Date

Reactive Forms Validation

Use Date Picker directly with Angular validators such as `Validators.required`.

Publish date

Required date picker using Angular reactive forms.

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.

Token Inspector

Inspect the date picker panel surface, presets, calendar, and optional time input.

Time

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);

Sun	Mon	Tue	Wed	Thu	Fri	Sat

Icons