Scale — Date Picker

Install

Examples

Single date

Set value as an ISO date (YYYY-MM-DD), or leave it empty for no initial selection. The component fires change with { value }.

Range

mode="range" selects a start (value) and end date; change then carries { start, end }.

With actions and limits

show-actions adds a confirm/cancel footer (the selection stays pending until confirmed); min / max constrain the window; and first-day-of-week sets the week start.

Localized

Pass a BCP-47 locale to translate the month and weekday names; combine with first-day-of-week for regional conventions.

Guidelines

Usage

date and range selection in forms, filters, and scheduling flows. For free-text date entry, pair it with an Input.

Do

Use min / max to rule out impossible dates rather than validating after the fact.
Set show-actions when a selection should be deliberate (e.g. inside a popover).
Match locale and first-day-of-week to the user’s region.

Don’t

Don’t use a calendar for a far-past date like birth year — a typed Input is faster.
Don’t hide the selected value — echo it back near the field.
Don’t disable arbitrary days without telling the user why they’re unavailable.

Accessibility

Grid: the calendar is a role="grid" of gridcell day buttons with roving tabindex — one tab stop for the whole grid.
Keyboard: ← → day, ↑ ↓ week, Home / End week edges, Page Up / Page Down month, Shift+Page Up / Page Down year.
Selection: the chosen day (and range endpoints/fill) carry aria-selected; today is marked aria-current="date".
Announcements: the month label is a polite live region, so month changes are read out.
Month nav: the prev/next arrows are labelled Button Icons (“Previous month” / “Next month”).
Disabled days: dates outside min/max render as disabled buttons, skipped by activation.

Properties

Input — typed date entry, or a trigger field for the picker.
Button Icon — the month-navigation arrows.
Help Text — explain date constraints beneath the field.

Date Picker