Component · C-064

DatePicker

A date field with an anchored panel, not portalled. It covers single dates and ranges, formats with Intl and returns Date through onValueChange; the application stores ISO 8601 and converts it at render time.

Install

Install koten-theme first when the project has no Koten tokens yet.

npx shadcn@latest add https://koten.codehive.com.co/r/date-picker.json

Requirements

• KotenProvider: useKoten supplies the panel labels and the locale; useKotenFormatters formats the visible value and the calendar days.
• Controlled value (ISO 8601): Store the date as ISO in your state, convert it to Date for value and back to ISO in onValueChange. value and onValueChange are the single source of truth.

Accessibility

• The field is a button with aria-haspopup="dialog", aria-expanded and aria-controls pointing to the panel.
• The panel is anchored to the field (no portal); Escape closes it and returns focus to the button.
• label, description and error are connected through aria-labelledby and aria-describedby; the error uses aria-live.
• The visible value is formatted with Intl; the controlled state keeps ISO in the application.

Read the whole page

• Markdown page
• Agent index (llms.txt)
• Full documentation (llms-full.txt)

Koten UI · llms.txt · llms-full.txt · Markdown