Date / Time / Color

Date, date-range (with presets), time and color pickers. Month/day names, week start and formatting come from the active locale — switch the demo locale in the top bar.

Pickers

Pickers

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" />

Values are ISO strings ('2026-11-06', '09:30', ['2026-11-01', '2026-11-07']) so they serialize cleanly; display formatting uses Intl for the current locale.

API

DatePicker

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

Prop	Type	Default
modelValue	any	—
placeholder	string	—
min	string	—
max	string	—
id	string	—
disabled	boolean	—
clearable	boolean	true
inline	boolean	—

Events: update:modelValue

DateRangePicker

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

Prop	Type	Default
modelValue	array	—
id	string	—
presets	boolean	true

Events: update:modelValue

TimePicker

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

Prop	Type	Default
modelValue	any	—
step	number	5
id	string	—
placeholder	string	—

Events: update:modelValue

ColorPicker

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

Prop	Type	Default
modelValue	string	"#0283cc"
id	string	—
palette	array	—

Events: update:modelValue