DatePicker

日付入力と、ポップオーバーで開くカレンダーを組み合わせた入力欄

インポート

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

使い方

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

Firefox は日付入力の中に自前のカレンダーボタンを描き、それを消す方法がありません。そのため Firefox ではカレンダーのボタンが 2 つ並びます。

制御モード

onChange は値（YYYY-MM-DD、空なら ''）を受け取ります。カレンダーで選んだときも、打ち込んだときも同じです。

2026-09-25

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

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

最小値 / 最大値

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

無効

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

@k8ordo/form と使う

カレンダーで選んだ日付は入力欄に書き込まれ、input イベントで知らされます。フォームには打ち込んだときと同じように伝わります（変更の有無、ルール、エラーの解除）。

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: -

型ベース（内部で固定する一部attrsは除外）: InputHTMLAttributes<HTMLInputElement>

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

Components