Yugen UI

DateTimePicker

DateTimePicker chọn ngày và giờ trong cùng một popover: lịch ở trên, ô giờ ở dưới.

Lịch là Calendar của DatePicker, ô giờ là TimePicker (gõ tự do "9", "930", "9:30 PM" hoặc chọn trong danh sách cách nhau timeIncrement phút). Chọn ngày giữ giờ đã chọn (mặc định 00:00); giờ chọn trước khi có ngày được dùng khi chọn ngày. Nút Xong đóng popover; giá trị đã cập nhật ngay khi chọn. Hiển thị ngày dạng số và giờ theo locale (chu kỳ 12 / 24 giờ theo locale hoặc hourCycle). minDate / maxDate giới hạn phần ngày.
Chưa đặt lịch

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 { DateTimePicker } 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.

Chu kỳ 24 / 12 giờ

hourCycle ghi đè chu kỳ theo locale.

Cách dùng

Nên
  • Dùng khi thời điểm cụ thể quan trọng (lịch hẹn, hạn chót có giờ).
  • Cho biết múi giờ ở hint khi người dùng ở nhiều nơi.
Không nên
  • Không dùng DateTimePicker khi chỉ cần ngày — dùng DatePicker.
  • Không ép bước giờ quá nhỏ (1 phút) — danh sách quá dài; giờ lẻ vẫn gõ được.

Props

Prop · KiểuMặc địnhMô tả
value / defaultValueDate | nullMặc định: —Ngày giờ đã chọn.
onValueChange(date: Date | null) => voidMặc định: —Gọi khi đổi ngày hoặc giờ, hoặc xoá.
timeIncrementnumberMặc định: 30Bước giữa các giờ trong danh sách (phút).
hourCycle"h23" | "h12"Mặc định: theo locale24 giờ hoặc 12 giờ.
minDate / maxDateDateMặc định: —Ngày sớm / muộn nhất (chỉ phần ngày).
formatDate(date: Date) => stringMặc định: —Định dạng hiển thị; mặc định ngày dạng số + giờ theo locale.
placeholderstringMặc định: "Select date and time…"Chữ khi chưa chọn.
clearablebooleanMặc định: falseHiện nút xoá khi có giá trị.
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>.

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.dateTimePicker

Khoá · KiểuMặc định (tiếng Anh)messagesVi
placeholderstring

Placeholder khi chưa chọn.

Mặc định (tiếng Anh)"Select date and time…"messagesVi"Chọn ngày giờ…"
clearstring

aria-label nút xoá giá trị (clearable).

Mặc định (tiếng Anh)"Clear"messagesVi"Xoá giá trị"
timestring

Nhãn ô giờ trong popover.

Mặc định (tiếng Anh)"Time"messagesVi"Giờ"
donestring

Nút đóng popover.

Mặc định (tiếng Anh)"Done"messagesVi"Xong"