DatePicker

日付・日時選択コンポーネント。入力欄への直接入力とカレンダー選択の両方に対応。

インポート

import { DatePicker } from '@caroainc/ui-components/client'

依存パッケージ

このコンポーネントは date-fns-tz を使用します。利用する場合はインストールしてください。

npm install date-fns-tz

基本的な使い方

日付のみを選択するシンプルなパターンです。

const [date, setDate] = useState<Date | undefined>()
 
<DatePicker value={date} onChange={setDate} />

カレンダーのみ（即時選択）

closeOnSelect を指定すると、日付をクリックした瞬間に確定してポップオーバーが閉じます。クリア/決定ボタンや入力欄が非表示になり、シンプルなカレンダーのみの表示になります。

const [date, setDate] = useState<Date | undefined>()
 
<DatePicker
  value={date}
  onChange={setDate}
  closeOnSelect
/>

注意: showTime が true の場合、時刻入力が必要なため closeOnSelect は無視されます。

日時選択

showTime を指定すると、時刻も選択できます。

const [dateTime, setDateTime] = useState<Date | undefined>()
 
<DatePicker
  value={dateTime}
  onChange={setDateTime}
  showTime
/>

日付と日時の比較

日付のみ

日時

// 日付のみ
<DatePicker value={date} onChange={setDate} />
 
// 日時
<DatePicker value={dateTime} onChange={setDateTime} showTime />

タイムゾーン対応（JST → UTC変換）

timezone を指定すると、入力はそのタイムゾーンとして解釈され、UTCに変換されて onChange に渡されます。

サーバーにUTCで保存し、表示時はJSTに変換するケースで便利です。

const [dateTime, setDateTime] = useState<Date | undefined>()
 
<DatePicker
  value={dateTime}
  onChange={setDateTime}
  showTime
  timezone="Asia/Tokyo"
/>

サイズ

3つのサイズが用意されています。

default

<DatePicker size="sm" value={date} onChange={setDate} />
<DatePicker size="default" value={date} onChange={setDate} />
<DatePicker size="lg" value={date} onChange={setDate} />

曜日表示

showDayOfWeek を指定すると、曜日も表示されます。

<DatePicker value={date} onChange={setDate} showDayOfWeek />
// → 2026/01/21(火)

カスタムアイコン

iconName でカレンダーアイコンを変更できます。デフォルトは Calendar です。

<DatePicker value={date} onChange={setDate} iconName="Clock" />

プレースホルダー

<DatePicker
  value={date}
  onChange={setDate}
  placeholder="期日を設定"
/>

無効状態

<DatePicker
  value={date}
  onChange={setDate}
  disabled
/>

実際の使用例

フォーム内での使用

期日

import { Field, FieldLabel } from '@caroainc/ui-components/client'
import { DatePicker } from '@caroainc/ui-components/client'
 
function TaskForm() {
  const [dueDate, setDueDate] = useState<Date | undefined>()
 
  return (
    <Field>
      <FieldLabel>期日</FieldLabel>
      <DatePicker
        value={dueDate}
        onChange={setDueDate}
        placeholder="期日を選択"
      />
    </Field>
  )
}

イベント登録フォーム

開始日時

終了日時

function EventForm() {
  const [startAt, setStartAt] = useState<Date | undefined>()
  const [endAt, setEndAt] = useState<Date | undefined>()
 
  return (
    <div className="flex gap-4">
      <Field>
        <FieldLabel>開始日時</FieldLabel>
        <DatePicker
          value={startAt}
          onChange={setStartAt}
          showTime
          timezone="Asia/Tokyo"
          placeholder="開始日時"
        />
      </Field>
      <Field>
        <FieldLabel>終了日時</FieldLabel>
        <DatePicker
          value={endAt}
          onChange={setEndAt}
          showTime
          timezone="Asia/Tokyo"
          placeholder="終了日時"
        />
      </Field>
    </div>
  )
}

Props

Prop	Type	Default	Description
`value`	`Date`	`-`	選択された日付
`onChange*`	`(date: Date \| undefined) => void`	`-`	日付が変更された時のコールバック
`showTime`	`boolean`	`false`	時刻選択を有効にする
`timezone`	`string`	`-`	タイムゾーン（IANA形式）。showTimeがtrueの場合のみ有効。入力はこのタイムゾーンとして解釈されUTCに変換される
`placeholder`	`string`	`'yyyy/MM/dd' / 'yyyy/MM/dd HH:mm'`	プレースホルダーテキスト
`iconName`	`IconName`	`'Calendar'`	トリガーに表示するアイコン
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	トリガーボタンのサイズ
`disabled`	`boolean`	`false`	無効状態
`closeOnSelect`	`boolean`	`false`	日付クリックで即座に確定する。trueの場合、カレンダーのみ表示になり、クリックで即座にonChangeが呼ばれてポップオーバーが閉じる。showTimeがtrueの場合は無視される
`showDayOfWeek`	`boolean`	`false`	曜日を表示する（例: 2026/01/21(火)）
`defaultTime`	`string`	`'09:00'`	デフォルトの時刻（HH:mm形式）。showTimeがtrueの場合に使用
`className`	`string`	`-`	追加のクラス名

注意事項

入力欄に直接日付を入力できます（yyyy/MM/dd または yyyy-MM-dd 形式）
フォーカスが外れた時に入力値が確定されます
timezone を指定した場合、value はUTC、表示は指定タイムゾーン（例: JST）として扱われます
showTime なしの場合、時刻は 00:00:00 として扱われます

DatePicker

On this page