DatePicker

日付選択コンポーネント。カレンダーUIから直感的に日付を選択できます。

基本的な使い方

Preview

デフォルト値を持つ

初期値を設定した日付選択。

Preview

カスタム日付フォーマット

dateFormat プロパティで日付の表示形式をカスタマイズできます。

Preview

無効状態

disabled 属性で無効化できます。

Preview

FormControlと組み合わせ

FormControlと組み合わせることで、ラベル、ヘルパーテキスト、エラーメッセージを表示できます。

Preview

エラー状態での使用

Preview

日付制限

dayPickerProps を使って選択可能な日付を制限できます。

未来の日付のみ

Preview

Props

Prop	Type	Default	Description
`value`	`Date \| undefined`	-	選択された日付
`onChange`	`(date: Date \| undefined) => void`	-	日付変更時のコールバック
`dateFormat`	`(date: Date) => string`	`(date) => date.toLocaleDateString('ja-JP')`	日付のフォーマット関数
`dayPickerProps`	`DayPickerProps`	-	react-day-pickerのプロパティ
`inputProps`	`InputProps`	-	Inputコンポーネントに渡すプロパティ
`disabled`	`boolean`	`false`	無効状態
`className`	`string`	-	追加のCSSクラス

アクセシビリティ

キーボード操作: カレンダーのキーボード操作をサポート
フォーカスインジケータ: フォーカス時に明確なリングを表示
ラベル関連付け: FormControlと組み合わせることで適切なラベル関連付け
ARIAアトリビュート: react-day-pickerの組み込みARIA属性

使用例

期間選択フォームでの使用例:

import { DatePicker, FormControl, Button } from '@codeconnect-llc/design-system'
import { useState } from 'react'

export function ReservationForm() {
  const [startDate, setStartDate] = useState<Date>()
  const [endDate, setEndDate] = useState<Date>()

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log({ startDate, endDate })
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6 max-w-md">
      <FormControl label="開始日" htmlFor="startDate" required>
        <DatePicker
          id="startDate"
          value={startDate}
          onChange={setStartDate}
        />
      </FormControl>

      <FormControl label="終了日" htmlFor="endDate" required>
        <DatePicker
          id="endDate"
          value={endDate}
          onChange={setEndDate}
          dayPickerProps={{
            disabled: startDate ? { before: startDate } : undefined,
          }}
        />
      </FormControl>

      <Button type="submit" variant="primary" size="lg" className="w-full">
        予約する
      </Button>
    </form>
  )
}

react-day-pickerについて

このコンポーネントは内部で react-day-picker を使用しています。より高度なカスタマイズが必要な場合は、dayPickerProps を通じて react-day-picker の全機能にアクセスできます。