日付ピッカーDatePickerExperimental
単一の日付を選択するカレンダーポップオーバー付きの入力コンポーネントです。
プレビュー
状態とバリエーション
選択済み
選択済みの日付を入力欄に表示します。フォーム項目として使う場合はラベルと組み合わせます。
未選択
日付が未選択の状態です。未入力時の表示で、期待する入力形式を示します。
連続選択
日付を選びながら比較したい場合は、選択後もカレンダーを開いたままにできます。
日付ごとの無効化
disabledDates と modifiers を使うと、過去日や満席日を DatePicker から直接無効化できます。
無効
変更できない日付は操作できない状態にします。必要に応じて理由を補足します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| id | string | - | 入力欄に付与する ID です。ラベルと紐づけます。 |
| value | Date | - | 選択中の日付。 |
| onValueChange | (date: Date | undefined) => void | - | 入力またはカレンダー選択で日付が変わった時に呼ばれます。 |
| placeholder | string | 'yyyy-mm-dd' | 未入力時に表示する入力形式のヒントです。 |
| dateFormat | string | 'yyyy-MM-dd' | 表示に使う日付書式です。直接入力では yyyy-MM-dd を解釈します。 |
| editable | boolean | true | 直接入力を許可するかを指定します。許可しない場合はカレンダー選択専用にできます。 |
| locale | Locale | - | カレンダーと表示書式に使う言語設定です。 |
| calendarLabel | string | 'Open calendar' | カレンダーを開くアイコンボタンの読み上げ用ラベルです。 |
| todayLabel | string | - | 今日へ戻すボタンのラベルです。未指定時は表示言語に合わせます。 |
| previousLabel | string | - | 今日へ戻す前の日付へ戻るボタンのラベルです。未指定時は表示言語に合わせます。 |
| showTodayButton | boolean | true | カレンダー下部に今日へ戻すボタンを表示するか。 |
| closeOnSelect | boolean | true | 日付をクリックした時にカレンダーを閉じるかを指定します。選択しながら比較する用途では、開いたままにします。 |
| disabledDates | Matcher | Matcher[] | - | Calendar の disabled matcher に渡す日付単位の無効化条件です。disabled boolean とは別です。 |
| modifiers | CalendarProps['modifiers'] | - | Calendar に渡す日付 modifier です。満席日、休日、予約可能日などの装飾に使います。 |
| modifiersClassNames | CalendarProps['modifiersClassNames'] | - | modifier ごとの className を Calendar に渡します。 |
| startMonth | Date | - | 月・年移動で選べる最初の月を Calendar に渡します。 |
| endMonth | Date | - | 月・年移動で選べる最後の月を Calendar に渡します。 |
| getDisabledReason | (date: Date, modifiers: Modifiers) => ReactNode | - | 無効日ごとの理由を Calendar の Tooltip に表示します。 |
| disabled | boolean | - | 入力とカレンダー操作を無効化します。 |
使い方
import * as React from "react";
import { DatePicker, FormControl, FormGroup, FormLabel } from "@gunjo/ui";
export function DatePickerUsage() {
const [date, setDate] = React.useState<Date | undefined>();
return (
<FormGroup className="w-full max-w-sm">
<FormLabel htmlFor="date">Date</FormLabel>
<FormControl>
<DatePicker id="date" value={date} onValueChange={setDate} placeholder="yyyy-mm-dd" />
</FormControl>
</FormGroup>
);
}