Calendar

A month grid for picking one day. The value is YYYY-MM-DD.

Import

Copy code

import { Calendar } from '@k8ordo/ui';

Usage

tsx

Copy code

<Calendar defaultValue="2026-09-25" onChange={setDay} />

Min / Max

tsx

Copy code

<Calendar
  defaultValue="2026-09-25"
  max="2026-09-30"
  min="2026-09-10"
/>

Keyboard

Arrow keys move by day and week, Home / End to the ends of the week, PageUp / PageDown by month (by year with Shift), and Enter / Space select.

Language and today

Month and weekday names, and the first day of the week, follow the page language (<html lang>). Today depends on the visitor’s time zone, so the calendar renders in the browser alone; the server writes an empty box of the same size.

Props

defaultValue?: Type: string; Default: -
max?: Type: string; Default: -
min?: Type: string; Default: -
onChange?: Type: (value: string) => void; Default: -
value?: Type: string|null; Default: -

Prop	Type	Default
`defaultValue?`	`string`	-
`max?`	`string`	-
`min?`	`string`	-
`onChange?`	`(value: string) => void`	-
`value?`	`string`\|`null`	-

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