DatePicker

日付の入力フィールド単体。クリックでブラウザ標準のカレンダーが開きます。値があるときはサフィックスの calendar アイコンが × に切り替わり、クリックで値をクリアできます。Thinca デザインのカレンダー popup が必要な場合は Calendar コンポーネントと Popover を composition して組み立ててください。

プレビュー(動作デモ)

実際に日付を選択できます。クリックでブラウザ標準のカレンダーが開きます。

日付

選択値: (未選択)

DatePicker 単体ではブラウザ標準のカレンダーが開きます。Thinca デザインの popup を出したい場合は Calendar と Popover を composition してください。

期間選択 (横並び)

期間選択は単一の DatePicker を 2 つ組み合わせます。

時間指定あり

日付と時刻を両方入力させたい場合は、DatePicker と TimePicker を横並びに配置して合成します。 DatePicker 自体は時間を持たない(<input type="date"> ベース)ため、時刻は別コンポーネントに任せる。

日時

状態

Normal

生年月日

Focus

生年月日

Error

生年月日

Disabled

生年月日

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

export function Example() {
  const [date, setDate] = useState<Date | null>(null);
  return (
    <DatePicker
      label="生年月日"
      value={date}
      onChange={setDate}
    />
  );
}

Calendar との組み合わせ

Thinca デザインのカレンダー popup を出したい場合は、DatePicker をトリガーに、 Calendar を Popover の中身として composition します。DatePicker と Calendar は完全に独立した別コンポーネントです。

仕様

幅 160px / 高さ 40px / radius 4px
左に YYYY/MM/DD、右にカレンダーアイコン (16px)
Normal / Focus / Error / Disabled の 4 状態(Input と同じカラー仕様)
クリックでブラウザ標準のカレンダーが開く(<input type="date"> ベース)

利用基準

使うべき時

生年月日・契約開始日など、確定的な日付の入力
期間検索の開始日/終了日 (DatePicker を 2 つ組み合わせ)
label プロップで対象属性を明示する

使わない時

時刻だけが必要な場合 → TimePicker 単体を使用
選択肢が短い列挙の場合 (今日/明日など) → Select / 専用ボタンを使用

Figma

Figma で Date Picker (トリガー) を開く ↗