DatePicker

A date input paired with a calendar that opens in a popover.

Import

ts
import { DatePicker } from '@k8ordo/ui';

Usage

tsx
<DatePicker aria-label="Check-in" defaultValue="2026-09-25" name="checkIn" />

Firefox draws its own calendar button inside every date input and offers no way to hide it, so there the field shows two calendar buttons.

Controlled

onChange receives the value (YYYY-MM-DD, '' when empty), whether the date was typed or picked from the calendar.

2026-09-25

tsx
const [value, setValue] = useState('2026-09-25');

<DatePicker aria-label="Check-in" onChange={setValue} value={value} />

Min / Max

tsx
<DatePicker
  aria-label="Check-in"
  defaultValue="2026-09-25"
  max="2026-10-15"
  min="2026-09-20"
/>

Disabled

tsx
<DatePicker aria-label="Check-in" defaultValue="2026-09-25" disabled />

With @k8ordo/form

A date picked from the calendar is written into the input and announced with an input event, so the form hears it just as if it had been typed (dirty state, rules, clearing an error).

tsx
// schema.ts
export const bookingSchema = z.object({ checkIn: z.iso.date() });

// booking-form.tsx
const checkIn = form.field('checkIn');

<FormControl
  errorText={checkIn.error}
  invalid={checkIn.invalid}
  label="Check-in"
  required={checkIn.required}
  renderInput={(props) => <DatePicker {...props} {...checkIn.input} />}
/>

Props

defaultValue?
Type: string
Default: -
invalid?
Type: boolean
Default: false
onChange?
Type: (value: string) => void
Default: -
ref?
Type: Ref<HTMLInputElement>
Default: -
value?
Type: string
Default: -

Type base (some attrs are managed internally): InputHTMLAttributes<HTMLInputElement>

Wording this component renders (labels, placeholders, and the like) comes from the message dictionary when no prop sets it. To change it, see: i18n

Components