Date Picker

Demo & usage

More examples

<sv-date-picker
  label="Start date"
  [required]="true"
  minDate="2025-01-01"
  [(value)]="start" />

<sv-date-picker
  ariaLabel="Start date"
  [(value)]="start"
  (opened)="onOpen()"
  (closed)="onClose()" />

// form = new FormGroup({ start: new FormControl('2025-01-15') });
<sv-date-picker formControlName="start" label="Start date" />

<!-- or template-driven -->
<sv-date-picker [(ngModel)]="start" />

<sv-date-picker locale="en-US" [(value)]="start" />

<!-- pinned to a business week regardless of the tag -->
<sv-date-picker locale="ar-EG" [weekStart]="0" [(value)]="start" />

noWeekends = (d: Date) => d.getDay() === 0 || d.getDay() === 6;

<sv-date-picker [dateDisabled]="noWeekends" minDate="2026-01-01" [(value)]="start" />

When to use

• Selecting a single calendar date with month/year navigation.
• You need min/max constraints and disabled-date handling.
• For time-of-day use the Time Picker; for ranges, compose two pickers.

Async states

None — this component has nothing to load, so it has no loading, empty or error state to drive.

Outputs

<sv-date-picker-pro>

Also in this family — SvDatePickerProComponent from @styloviz-pro/input-field.

Inputs

Outputs

<sv-date-range-picker>

Also in this family — SvDateRangePickerComponent from @styloviz-pro/input-field.

Inputs

Outputs

Customization & theming

• **The value is a calendar date, not an instant** — a `YYYY-MM-DD` string, never a `Date`. A birthday is not a moment; it is the same date everywhere on Earth, and a `Date` for "15 June" shifts across midnight for half the world. `@styloviz/core` names the policy: `SvCalendarDate`, `svIsCalendarDate` (which rejects `2026-02-30`, where `new Date()` quietly returns 2 March), `svAddCalendarDays` (UTC arithmetic, so a DST boundary cannot move the day) and `SvDateValueAdapter`, the seam a Temporal or Luxon migration swaps behind.
• `timeZone` says whose **today** the calendar means — the one place a calendar date cannot avoid a zone, because for several hours of every day two places on Earth are on different dates. It drives the ringed cell, the Today button, the month the panel opens on and the keyboard’s starting point. Unset means the browser’s zone, which is what the component always did, so leaving it alone changes nothing. ⚠️ It never converts the value: a calendar date has no zone to convert between. To build an instant, compose with `svComposeDateTime`, which reports the DST gaps and ambiguities instead of guessing.
• Three views: day grid, month grid and year grid, with a Today / Clear footer.
• Two-way bind `[(value)]` (YYYY-MM-DD) or use a reactive control (CVA); constrain with `minDate` / `maxDate`; set `label`, `ariaLabel`, `placeholder`, `required`, `disabled`.
• React to `opened` / `closed`; today and disabled dates are highlighted with full dark-mode support.
• `locale` drives the first day of the week and the column headings together, from CLDR (`Intl.Locale#getWeekInfo`) rather than a table; `weekStart` (0 = Sunday) overrides it. Both default to the kit's original Monday-first English headings so an upgrade changes nothing until you ask it to.
• `dateDisabled` is a `(date: Date) => boolean` rule, OR-ed with the `minDate`/`maxDate` window. It gates day cells only — a month is not unavailable because some of its days are, and the month/year views are navigation rather than selection.

Best practices

• Do: Constrain selectable dates with `minDate` / `maxDate` (YYYY-MM-DD) to prevent invalid input.
• Do: Set `locale` when your users are not all on a Monday week. A calendar is read by column position before it is read by number, so a Sunday-first reader on a Monday-first grid picks the wrong date confidently — and the component reports exactly what they clicked.
• Do: Express blackout rules as a `dateDisabled` predicate rather than enumerating dates. A date merely absent from a list looks exactly like a date that is allowed.
• Don't: Don't fetch inside `dateDisabled`. It runs once per rendered cell, 42 per month view, on every navigation.
• Do: Provide a `label` or `ariaLabel` so the trigger has a clear accessible name.
• Do: Bind with `formControlName` / `[(ngModel)]` for validation and dirty/touched tracking; `[(value)]` remains available for lightweight use.
• Don't: Don't force calendar-only entry for power users who prefer typing the date.

Accessibility

• The calendar is a true `role="grid"`: weekday column headers, `role="row"` weeks and `role="gridcell"` day cells that carry `aria-selected`, so screen readers announce row/column position and the current selection.
• Keyboard navigable: Arrow keys by day, Home/End to the start and end of the week AS DISPLAYED (both were hardcoded to a Monday week, which put Home and End on the same cell for a Sunday-first grid), PageUp/PageDown by month (Shift for year), Enter/Space to select. Opening moves focus into the grid (roving tabindex — a single tab stop); Escape and selection close the popover and return focus to the trigger.
• Each day exposes a full-date `aria-label` and `aria-current="date"` for today; the trigger reports `aria-expanded` and an `ariaLabel`-based name. The Clear control is a real button (no nested interactive elements).
• Implements ControlValueAccessor — works with `[(ngModel)]`, `[formControl]` and `formControlName`; `formControl.disable()` disables the trigger.