Components / UI components / Forms
Date selectionExperimental alpha
Calendar
Choose a date or range with explicit month, locale and availability rules.
Calendar preview
Loading example…
Interactions use local sample data.
Usage and props
Import this component from @stackunseen/ui/application. Load @stackunseen/ui/styles.css first, then @stackunseen/ui/application.css.
Use date-only YYYY-MM-DD strings. Your app owns both the selected date or range and the displayed month. Supply YYYY-MM-DD dates, the displayed month and today from your app. Locale formats dates; labels translate interface text.
mode'single' | 'range' (optional)- Select one date by default, or a start/end range.
valueDateOnly | null, or DateRange- Controlled selection matching mode.
onValueChange(selection) => void (optional)- Requests a selection. An earlier range end restarts the range; a disabled interior day blocks completion.
monthDateOnly- Any valid date in the displayed month.
onMonthChange(month: DateOnly) => void- Requests the first day of the next displayed month.
localestring- Date and weekday formatting locale. Use labels to translate interface wording.
todayDateOnly (optional)- The host-supplied current date. No browser clock or timezone is assumed.
disabledDatesreadonly DateOnly[] (optional)- Unavailable dates. min and max provide inclusive date bounds.
These are the main props for the example. The package's TypeScript declarations include the full API.