日付 / 時刻 / 色

日付、日付範囲（プリセット付き）、時刻、カラーのピッカー。月名や曜日名、週の開始日、フォーマットは現在のロケールに従います。トップバーでデモのロケールを切り替えてみてください。

ピッカー

ピッカー

Vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-md-6">
    <ThlField label="Date" :help="date ?? ''" v-slot="{ id }"><ThlDatePicker :id="id" v-model="date" /></ThlField>
    <ThlField label="Date range" v-slot="{ id }"><ThlDateRangePicker :id="id" v-model="range" /></ThlField>
  </div>
  <div class="thl-col-12 thl-col-md-6">
    <ThlField label="Time" v-slot="{ id }"><ThlTimePicker :id="id" v-model="time" /></ThlField>
    <ThlField :label="`Color ${color}`" v-slot="{ id }"><ThlColorPicker :id="id" v-model="color" /></ThlField>
  </div>
  <div class="thl-col-12 thl-col-md-6"><ThlDatePicker v-model="date" inline /></div>
</div>

React

<DatePicker value={date} onChange={setDate} min="2026-11-01" max="2026-11-30" />
<DateRangePicker value={range} onChange={setRange} />
<TimePicker value={time} onChange={setTime} />
<ColorPicker value={color} onChange={setColor} />
<DatePicker value={date} onChange={setDate} inline />

Angular

<thl-date-picker [(value)]="date" min="2026-11-01" max="2026-11-30" />
<thl-date-range-picker [(value)]="range" />
<thl-time-picker formControlName="time" />
<thl-color-picker [(value)]="color" />

値は ISO 文字列（'2026-11-06'、'09:30'、['2026-11-01', '2026-11-07']）なので、そのままシリアライズできます。表示のフォーマットには現在のロケールの Intl を使います。

API

DatePicker

<ThlDatePicker> · import { ThlDatePicker } from '@thl-ui/vue'

Prop	型	デフォルト
modelValue	any	—
placeholder	string	—
min	string	—
max	string	—
id	string	—
disabled	boolean	—
clearable	boolean	true
inline	boolean	—

イベント: update:modelValue

DateRangePicker

<ThlDateRangePicker> · import { ThlDateRangePicker } from '@thl-ui/vue'

Prop	型	デフォルト
modelValue	array	—
id	string	—
presets	boolean	true

イベント: update:modelValue

TimePicker

<ThlTimePicker> · import { ThlTimePicker } from '@thl-ui/vue'

Prop	型	デフォルト
modelValue	any	—
step	number	5
id	string	—
placeholder	string	—

イベント: update:modelValue

ColorPicker

<ThlColorPicker> · import { ThlColorPicker } from '@thl-ui/vue'

Prop	型	デフォルト
modelValue	string	"#0283cc"
id	string	—
palette	array	—

イベント: update:modelValue