Form
Calendar
Month-grid date picker. Built on bits-ui's Calendar with @internationalized/date for locale-correct date math. Pair with Popover (later) for a DatePicker.
Examples
Single-date picker
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
28 | 29 | 30 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 1 |
import {today, getLocalTimeZone} from '@internationalized/date';
let value = $state(today(getLocalTimeZone()));
<Calendar bind:value />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | DateValue | undefined | — | Bindable @internationalized/date value. |
minValue | DateValue | — | Earliest selectable date. |
maxValue | DateValue | — | Latest selectable date. |
locale | string | 'en-US' | Locale for month / weekday names. |
weekdayFormat | 'narrow' | 'short' | 'long' | 'short' | Weekday header style. |
disabled | boolean | false | Lock all interactions. |
readonly | boolean | false | Allow focus but no selection changes. |
Install
CLI
npm install bits-ui @internationalized/date
npx @a3tai/mittsu add calendar