Calendar

月の表から日付を 1 つ選ぶカレンダー。値は YYYY-MM-DD

インポート

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

使い方

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

最小値 / 最大値

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

キーボード操作

矢印キーで日と週を、Home / End で週の端を、PageUp / PageDown で月を（Shift と一緒なら年を）移り、Enter / Space で選びます。

言語と「今日」

月名・曜日名・週の始まりはページの言語（<html lang>）に従います。今日は閲覧者のタイムゾーンでしか決まらないので、カレンダーはブラウザでだけ描かれ、サーバーは同じ寸法の空の箱を書きます。

Props

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

このコンポーネントが描画する文言（ラベルやプレースホルダーなど）は、propsで指定しないとき文言辞書から解決されます。差し替え方は次を参照してください: i18n

Components