DateTimePicker

日付と時刻を 1 つの入力単位として扱うピッカー。単一の input を持ち、クリックで開く Popover 内の Calendar + 時刻入力欄で選択する。値があるときは右端のカレンダーアイコンが × に切り替わり、日付と時刻を一括でクリアできる。予約日時・送信日時など日時セットの入力に使う。

プレビュー

日付・時刻のいずれかに値が入ると、右端に × が表示される。× を押すと両方が一括でクリアされる。

予約日時

日付: (未選択) / 時刻: (未選択)

いずれかに値が入ると右端に × が出て、日付と時刻を一括クリアできます。

実装例

"use client";
import { useState } from "react";
import { DateTimePicker } from "@/components/DateTimePicker";

export function Example() {
  const [date, setDate] = useState<Date | null>(null);
  const [time, setTime] = useState<string | null>(null);
  return (
    <DateTimePicker
      label="予約日時"
      date={date}
      time={time}
      onDateChange={setDate}
      onTimeChange={setTime}
    />
  );
}

仕様

構成: Popover + CalendarWithViews(time 有効)を組み合わせ、日付グリッドと時刻入力を 1 つの Popover に集約する
表示形式: 入力欄には "YYYY/MM/DD HH:MM" を表示。片方だけ入っているときは未選択側を "年/月/日" または "--:--" のプレースホルダーで補う
右端の × ボタンは date != null || time != null のときのみ表示。押下で onDateChange(null) と onTimeChange(null) を両方呼び、Popover も閉じる
props: date / time / onDateChange / onTimeChange / onClear(任意) / error / disabled / label
disabled 状態では × を表示しない