日期 / 时间 / 颜色

日期、日期范围（带预设）、时间和颜色选择器。月份/星期名称、每周起始日和格式均来自当前语言——可在顶栏切换演示语言试试。

选择器

选择器

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