DateField

ブラウザの日付入力（type="date"）をそのまま使う入力欄。値は YYYY-MM-DD

インポート

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

使い方

tsx
<DateField aria-label="Date" defaultValue="2026-09-25" name="eventDate" />

最小値 / 最大値

範囲の判定はブラウザが持ちます。範囲の外の日付は rangeUnderflow / rangeOverflow になります。

tsx
<DateField
  aria-label="Date"
  defaultValue="2026-09-25"
  max="2026-12-31"
  min="2026-09-01"
/>

無効

tsx
<DateField aria-label="Date" defaultValue="2026-09-25" disabled />

エラー

tsx
<DateField aria-label="Date" invalid />

@k8ordo/form と使う

z.iso.date() から導いた input をそのまま spread できます。type を取り除く必要はありません。

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

// event-form.tsx
const eventDate = form.field('eventDate');

<FormControl
  errorText={eventDate.error}
  invalid={eventDate.invalid}
  label="Date"
  required={eventDate.required}
  renderInput={(props) => <DateField {...props} {...eventDate.input} />}
/>

Props

invalid?
Type: boolean
Default: false
ref?
Type: Ref<HTMLInputElement>
Default: -

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

Components