/ux
Components/Misc/DatePicker

DatePicker

Misc

Date picker field with a calendar popover.

Trigger button that opens a hard-edged calendar popover. Day numbers render in Space Mono, the selected date highlights in neo-green with obsidian text, and today gets a neo-green ring. Month navigation via chevron buttons or arrow keys. Escape closes the popover and returns focus to the trigger.

Usage

import { DatePicker } from "nosible-ux"

export default function Example() {
  return <DatePicker placeholder="Select date" />
}

Examples

Controlled

No date selected

Pre-selected date

Open with selection

Disabled

Disabled — no interaction

Accessibility

The trigger button announces the selected date or placeholder to screen readers via aria-label. Inside the popover, react-day-picker provides a full ARIA grid with keyboard navigation:

  • Arrow keys — move focus between days
  • Enter / Space — select the focused day
  • Page Up / Down — navigate months
  • Home / End — jump to first / last day of the week
  • Escape — close the popover, return focus to trigger

Props

Name TypeDefaultDescription
defaultOpen
boolean | undefined—Open the popover on first render. Default: `false`.
onChange
((date?: Date | undefined) => void) | undefined—Called whenever the selected date changes.
placeholder
string | undefined—Placeholder shown in the trigger when no date is selected. Default: `"Select date"`.
value
Date | undefined—Currently selected date (controlled). Omit to use internal state (uncontrolled).
← All ComponentsGetting Started →