Almanac
Date picker. One date or a range, typed in your format, with month and year views and earliest/latest dates.
- Component
- Date picker
- Pattern
- APG Date Picker Dialog
- Outputs
- React + Tailwind, HTML/CSS/JS
- Status
- In stock, tested
Test bench
Runs the exported code, not a mock-up.
Almanac · React + TailwindFull width
| Keys | What happens |
|---|---|
| EnterorSpace | On the calendar button: open the calendar. On a day: pick it. |
| Left arroworRight arrow | Previous or next day. |
| Up arroworDown arrow | Same day in the previous or next week. |
| HomeorEnd | First or last day of the week. |
| Page UporPage Down | Previous or next month. |
| Shift + Page UporShift + Page Down | Previous or next year. |
| Enter | On the month and year heading: pick a year, then a month. |
| Escape | In the year or month view: back to the days. Otherwise: close and return to the calendar button. |
| TaborShift + Tab | Move between the heading buttons and the calendar. Focus stays inside. |
Take it home
React + Tailwind CSS v4: install with one command, or copy the file. Your options are already in it.
npx shadcn@latest add "/r/date-picker.json"Run it in your project root. It writes components/date-picker.tsx with the options you set here. Needs Tailwind CSS v4 and a project set up for the shadcn CLI (npx shadcn@latest init).