DatePicker

DatePicker là ô nhập dạng Fluent mở Calendar trong popover để chọn ngày, hiển thị dd/MM/yyyy.

Trigger dùng chung kiểu viền với Input (viền đáy accessible, thanh brand khi focus), icon lịch bên phải, có nút xoá (clearable). Đặt trong <Field> để có nhãn, hint và thông báo lỗi. DateRangePicker chọn khoảng ngày với hai tháng cạnh nhau.

Ngày bắt đầu

Để trống nếu chưa chốt ngày.

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX

// npm install yugen-uiimport { DatePicker, DateRangePicker, Field } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Ngày giao hàng*

Vui lòng chọn ngày giao (từ hôm nay trở đi).

Giới hạn ngày & validation

minDate khoá các ngày trước hôm nay; Field hiển thị lỗi / thành công.

Thời gian nghỉ phép

Khoảng ngày

DateRangePicker: popover tự đóng khi đã chọn đủ ngày đầu và ngày cuối.

Kích thước & disabled

small 24px, medium 32px, large 40px.

Cách dùng

Nên

Luôn có nhãn (Field label hoặc aria-label) và gợi ý định dạng khi cần.
Dùng minDate / maxDate để chặn ngày không hợp lệ.
Bật clearable cho trường không bắt buộc.

Không nên

Không dùng DatePicker cho ngày rất xa hiện tại (ngày sinh) mà không có cách nhảy năm nhanh.
Không tự định dạng ngày khác nhau giữa các màn hình — giữ dd/MM/yyyy.

Props

Prop · Kiểu	Mặc định	Mô tả
value / defaultValueDate \| null	Mặc định: —	Ngày đã chọn (controlled / uncontrolled).
onValueChange(date: Date \| null) => void	Mặc định: —	Gọi khi chọn hoặc xoá (null). Tên cũ onSelectDate đã lỗi thời (bỏ ở 1.0).
placeholderstring	Mặc định: "Select a date…"	Chữ gợi ý khi trống.
clearableboolean	Mặc định: false	Hiện nút xoá khi có giá trị.
minDate / maxDateDate	Mặc định: —	Giới hạn ngày chọn được.
formatDate(date: Date) => string	Mặc định: dd/MM/yyyy	Định dạng hiển thị.
size"small" \| "medium" \| "large"	Mặc định: "medium"	Chiều cao 24 / 32 / 40px.
disabled / required / id / aria-*—	Mặc định: —	Field tự truyền khi bọc trong <Field>.
DateRangePicker.value / onValueChangeDateRange \| null / (range: DateRange \| null) => void	Mặc định: —	Khoảng { from, to }; numberOfMonths mặc định 2. Tên cũ onSelectRange đã lỗi thời (bỏ ở 1.0).

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.datePicker

Khoá · Kiểu	Mặc định (tiếng Anh)	messagesVi
placeholderstring Placeholder khi chưa chọn ngày.	Mặc định (tiếng Anh)`"Select a date…"`	messagesVi`"Chọn ngày…"`
clearstring aria-label nút xoá giá trị (`clearable`).	Mặc định (tiếng Anh)`"Clear"`	messagesVi`"Xoá giá trị"`