Components
DatePicker
A button that opens a calendar to pick one date
Overview
DatePicker picks one date from a calendar. The button shows the short date; dates are picked, not typed.
- Monday first — weeks start on Monday, like the app's weekly screens
- Today — shown in bold with a dot. The chosen day is a filled circle
- Keyboard — follows the WAI-ARIA datepicker dialog pattern
Basic Usage
Empty
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
value | Date | null | - | Yes | The chosen date, or null |
onChange | (date: Date) => void | - | Yes | Called with the picked day at local midnight |
placeholder | string | 'Date' | No | Text shown when there is no value |
aria-label | string | 'Date' | No | Accessible name. The full date is appended when set (Date, Thursday, October 15, 2026) |
disabled | boolean | false | No | Disabled. The calendar does not open |
className | string | - | No | Extra CSS class |
Specification
base
| 상태 | 요소 | 속성 | 값 |
|---|---|---|---|
| enabled | trigger | paddingX | $size.space.300 |
| enabled | trigger | paddingY | $size.space.150 |
| enabled | trigger | gap | $size.space.200 |
| enabled | trigger | borderRadius | $size.radius.200 |
| enabled | trigger | borderWidth | $size.stroke.border |
| enabled | trigger | borderColor | $color.border.default.default |
| enabled | trigger | backgroundColor | $color.background.default.default |
| enabled | trigger | typography | $text.bodySmall |
| enabled | trigger | color | $color.text.default.default |
| enabled | panel | padding | $size.space.300 |
| enabled | panel | gap | $size.space.200 |
| enabled | panel | borderRadius | $size.radius.200 |
| enabled | panel | borderWidth | $size.stroke.border |
| enabled | panel | borderColor | $color.border.default.default |
| enabled | panel | backgroundColor | $color.background.default.default |
| enabled | day | width | 32px토큰 아님 — no sizing token scale; matches Figma Calendar Day |
| enabled | day | typography | $text.bodySmall |
| enabled | day | color | $color.text.default.default |
| hover | trigger | backgroundColor | $color.background.default.defaultHover |
| hover | day | backgroundColor | $color.background.default.defaultHover |
| focusVisible | trigger | outlineWidth | $size.stroke.focus |
| focusVisible | trigger | outlineStyle | solid토큰 아님 — no line style token |
| focusVisible | trigger | outlineColor | $color.border.focus.default |
| focusVisible | trigger | outlineOffset | 2px토큰 아님 — no ring offset token |
| selected | day | backgroundColor | $color.background.brand.default |
| selected | day | color | $color.text.brand.onBrand |
| disabled | trigger | backgroundColor | $color.background.disabled.default |
| disabled | trigger | borderColor | $color.border.disabled.default |
| disabled | trigger | color | $color.text.disabled.default |
Accessibility
- The button's name carries the full date, for example "Date, Thursday, October 15, 2026". Pass
aria-labelto change the first part. - Enter or Space opens the calendar and focuses the chosen day (or today).
- Left and Right move a day, Up and Down a week, Page Up and Page Down a month (with Shift, a year), Home and End go to the start and end of the week.
- Enter or Space picks the day. Escape closes without picking. Both return focus to the button. Tab stays inside the calendar.
Guidelines
onChangereceives the picked day at local midnight. Combine it with your own time if you need one, asTimePicker.Datedoes.