Props

プロップ型デフォルト説明
valueDate | null—選択された日時値
onChange(dateTime: Date | null) => void—値が変更されたときのコールバック
timeTimeConfig—時刻パネルの設定
minDateDate—選択可能な最小日付
maxDateDate—選択可能な最大日付
localePartial<Locale>—カスタムロケールの設定
initialMonthDate—初期表示月
size"small" | "medium" | "large" | "x-large""medium"コンポーネントのサイズ
weekStartsOnWeekDay"sunday"週の開始曜日
isDateUnavailable(date: Date) => boolean—日付を無効としてマークする
displayFormatstring—カスタム表示フォーマット
openboolean—制御されたオープン状態
initialOpenboolean—初期オープン状態(非制御)
onOpenChange(open: boolean) => void—オープン状態が変更されたときのコールバック
requiredbooleanfalse値のクリアを無効にする
showOutsideDaysbooleanfalse隣接する月の日付を表示する
highlightDatesDate[]—ハイライトする日付
shouldCloseOnSelectbooleanfalseプリセットクリック時に自動確定する
numberOfMonthsnumber1表示する月数
captionLayout"buttons" | "dropdown""buttons"キャプションのナビゲーションスタイル
fromYearnumber—ドロップダウンの開始年
toYearnumber—ドロップダウンの終了年
disablePastbooleanfalse今日より前の日付を無効にする
disableFuturebooleanfalse今日より後の日付を無効にする
inlinebooleanfalseカレンダーをインライン表示(ポップアップなし)
namestring—フォーム送信用の隠しinputのname
placeholderstring—トリガーのプレースホルダーテキスト
hideHeaderbooleanfalseナビゲーションヘッダーを非表示にする
hideFooterbooleanfalseアクションフッターを非表示にする

TimeConfig

interface TimeConfig {
/** 時刻表示の精度。デフォルトは "minute" です。 */
precision?: "hour" | "minute" | "second";
/** 12時間形式または24時間形式。デフォルトは "24" です。 */
hourFormat?: "12" | "24";
/** 分の増減ステップ。デフォルトは 5 です。 */
minuteStep?: 1 | 2 | 3 | 5 | 10 | 15 | 20 | 30;
/** 秒の増減ステップ。デフォルトは 1 です。 */
secondStep?: 1 | 2 | 3 | 5 | 10 | 15 | 20 | 30;
/** 各スクロールホイール項目の高さ(px)。デフォルトは 32 です。 */
itemHeight?: number;
}