Date picker

@summonware/ui · date-picker · P1 · Advanced UI

Usage

A month-grid date picker, hand-built rather than wrapping a library — the reference used flatpickr, but restyling a third-party picker's own DOM to match `--sw-*` tokens fights the library more than it saves for something this size.
import { DatePicker } from '@summonware/ui';

Best practices

DoSet `min`/`max` whenever the domain has a real constraint (no past due dates, no bookings past a lead time) — disable those cells instead of validating after the fact.
Don'tUse this for a birthdate or any far-past date. A grid you page through one month at a time is the wrong control for 40 years of scrollback — a text input with format validation serves that better.

Examples

Common configurations, variations and states.

Basic date picker

Choose a date on or after today

Click the field to open the month grid. Dates before today are disabled.

Reference variants

0 of 8 labels from the reference are demonstrated above.
Weekends DisabledDefault DateClose on SelectDates DisabledMin / Max DateWeek NumbersDate RangePreview

Where it appears

Used on 9 catalogued screens, including admins-course-course-add, admins-course-dashboard, admins-course-student-add, admins-course-teacher-add, admins-invoice-create, admins-invoice-edit and 3 more.