Date Picker

Forms

Picker ngày tháng tích hợp popover, hỗ trợ 3 chế độ: single, range và time-only. Xây dựng trên react-day-picker và Base UI Popover với time picker tuỳ chỉnh.

Cài đặt

Import

TSX

Single Date

Chọn một ngày duy nhất, hiển thị theo định dạng dd/MM/yyyy.

Ngày sinh

Date Range

Chọn khoảng thời gian từ ngày đến ngày.

Khoảng thời gian

Time Only

Chỉ chọn giờ, không hiện lịch.

Giờ bắt đầu

Date + Time

Kết hợp chọn ngày và giờ trong cùng một picker.

Thời gian sự kiện

Range + Time

Chọn khoảng ngày kèm giờ riêng cho ngày bắt đầu và ngày kết thúc.

Ca làm việc

Time Format

3 định dạng giờ: chỉ giờ, giờ:phút, hoặc giờ:phút:giây.

HH (chỉ giờ)

HH:mm

HH:mm:ss

Time Picker Style

2 kiểu UI chọn giờ: native input type="time" hoặc dropdown selects.

timePickerStyle="input"

timePickerStyle="select"

Chặn ngày

Giới hạn ngày có thể chọn hoặc vô hiệu hóa toàn bộ picker.

disablePastDates

Ngày trong tương lai

disabled

Không thể chọn

Trạng thái

Hỗ trợ description và error message bên dưới picker.

Với description

Chọn ngày bắt đầu của dự án

Với error

Ngày không hợp lệ

API Reference

Prop	Type	Default	Mô tả
`captionLayout`	`"label" \| "dropdown" \| "dropdown-months" \| "dropdown-years" \| undefined`	`"undefined"`	Hiển thị tháng/năm dưới dạng text label hoặc dropdown
`mode`	`"single" \| "range" \| "time-only"`	`"single"`	Chế độ picker: chọn một ngày, khoảng ngày, hoặc chỉ giờ
`date`	`Date \| DateRange`	—	Giá trị ngày đang chọn (controlled)
`onDateChange`	`(date: Date \| DateRange \| undefined) => void`	—	Callback khi ngày thay đổi
`onChange`	`(date: Date \| DateRange \| undefined) => void`	—	Alias của onDateChange — tương thích với React Hook Form
`timeValue`	`string`	—	Giá trị giờ dạng string, chỉ dùng ở mode time-only
`onTimeChange`	`(time: string) => void`	—	Callback khi giờ thay đổi (mode time-only)
`label`	`string`	—	Label hiển thị trên picker
`placeholder`	`string`	`"Select date..."`	Placeholder khi chưa có giá trị
`showTime`	`boolean`	`false`	Hiện time picker kèm calendar (chỉ mode single)
`timeFormat`	`"HH" \| "HH:mm" \| "HH:mm:ss"`	`"HH:mm:ss"`	Định dạng giờ hiển thị
`timePickerStyle`	`"input" \| "select"`	`"select"`	Kiểu UI chọn giờ: native input hoặc dropdown selects
`disablePastDates`	`boolean`	`false`	Chặn chọn ngày trong quá khứ
`disabled`	`boolean`	`false`	Vô hiệu hóa toàn bộ picker
`required`	`boolean`	—	Đánh dấu trường bắt buộc
`description`	`string`	—	Mô tả phụ bên dưới picker (ẩn khi có error)
`error`	`string`	—	Thông báo lỗi bên dưới picker (thay thế description)
`className`	`string`	—	Class CSS tuỳ chỉnh cho wrapper ngoài cùng