nalarx-uiDate picker
A date field that opens a month calendar in the app's theme.
bunx shadcn@latest add @nalarx/date-pickerUsage
The value is a local date as "YYYY-MM-DD", or "" when nothing is picked. The whole field opens the calendar; picking a day, Today or Clear closes it.
const [start, setStart] = useState("");
<DatePicker value={start} onChange={setStart} ariaLabel="Start date" />Empty with the placeholder, with a value, and disabled:
The open panel, also exported as Calendar. Today is 13 November here, 20 November is picked, and the late-October and December days are faded but still pickable:
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
Month and weekday names, the placeholder, Today, Clear and the month buttons' labels come from UIStringsProvider (locale, datePlaceholder, today, clear, previousMonth, nextMonth). Weeks start on Monday.
Keyboard
| Key | Does |
|---|---|
Enter, Space on the field | Opens the calendar and focuses the picked day, else today. |
← → | Previous or next day. |
↑ ↓ | Same day in the previous or next week. |
Home, End | Monday or Sunday of the week. |
PageUp, PageDown | Same day in the previous or next month (clamped to the month's last day). |
Shift + PageUp, PageDown | Same day in the previous or next year. |
Enter, Space on a day | Picks it and closes. |
Tab | Moves between the month buttons, the days and Clear / Today. |
Escape | Closes and returns focus to the field. |
Moving past the shown month switches the month.
Props
DatePicker
| Prop | Type | Default | |
|---|---|---|---|
value | string | "YYYY-MM-DD" or "". | |
onChange | (value: string) => void | "" after Clear. | |
ariaLabel | string | Names the field and the calendar; the picked date is appended to the field's name. | |
width | number | string | 168 | px, or any CSS length. |
height | number | 40 | px. |
disabled | boolean | false | |
placeholder | string | datePlaceholder string | |
min | string | "YYYY-MM-DD": earlier days are disabled and Today hides when it is earlier. | |
id, className, ref | On the field button. |
Calendar
| Prop | Type | Default | |
|---|---|---|---|
value | string | "YYYY-MM-DD" or "". | |
onChange | (value: string) => void | ||
today | string | the device's date at mount | Pass it when "today" must follow another time zone. |
min | string | Same as on DatePicker. | |
className | string |
Replaces
DatePicker in apps/web/src/components/ui/DatePicker.tsx (used by the automation form) and apps/web/src/lib/shared/ui/calendarGrid.ts. The Platform app has none.