Ngày / Giờ / Màu

Chọn ngày, khoảng ngày (có các khoảng đặt sẵn), giờ và màu. Tên tháng/thứ, ngày đầu tuần và định dạng lấy theo ngôn ngữ hiện tại — thử đổi ngôn ngữ demo trên thanh điều hướng.

Các bộ chọn

Các bộ chọn

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

Giá trị là chuỗi ISO ('2026-11-06', '09:30', ['2026-11-01', '2026-11-07']) nên dễ lưu trữ; phần hiển thị dùng Intl theo ngôn ngữ hiện tại.

API

DatePicker

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

Prop	Kiểu	Mặc định
modelValue	any	—
placeholder	string	—
min	string	—
max	string	—
id	string	—
disabled	boolean	—
clearable	boolean	true
inline	boolean	—

Sự kiện: update:modelValue

DateRangePicker

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

Prop	Kiểu	Mặc định
modelValue	array	—
id	string	—
presets	boolean	true

Sự kiện: update:modelValue

TimePicker

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

Prop	Kiểu	Mặc định
modelValue	any	—
step	number	5
id	string	—
placeholder	string	—

Sự kiện: update:modelValue

ColorPicker

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

Prop	Kiểu	Mặc định
modelValue	string	"#0283cc"
id	string	—
palette	array	—

Sự kiện: update:modelValue