Yugen UI

DateRangePicker · preset

DateRangePicker có danh sách chọn nhanh khoảng ngày cạnh lịch.

Truyền presets (mảng { label, range: () => ({ from, to }) }) để hiện các lựa chọn nhanh bên cạnh lịch; ở màn hẹp danh sách xếp phía trên. DEFAULT_RANGE_PRESETS gồm Hôm nay, 7 ngày qua, 30 ngày qua, Tháng này, Tháng trước, luôn tính theo thời điểm hiện tại; nhãn lấy từ messages.dateRangePicker của YugenProvider. Preset khớp khoảng đang chọn được đánh dấu (aria-pressed); preset vượt minDate / maxDate bị vô hiệu. Mọi prop cũ của DateRangePicker giữ nguyên.

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 { DateRangePicker, DEFAULT_RANGE_PRESETS, type DateRangePreset } 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.

Preset tuỳ biến & maxDate

maxDate = hôm nay nên "30 ngày tới" bị vô hiệu.

Cách dùng

Nên
  • Giữ 3–6 preset phổ biến nhất của nghiệp vụ; người dùng vẫn chọn tay trên lịch được.
  • Tính khoảng trong range() (không phải hằng số) để preset luôn đúng theo ngày hiện tại.
Không nên
  • Không dùng preset cho khoảng tương lai khi đã đặt maxDate là hôm nay — preset sẽ bị vô hiệu.
  • Không đặt nhãn preset mơ hồ ("Gần đây") — ghi rõ số ngày / tháng.

Props

Prop · KiểuMặc địnhMô tả
presetsDateRangePreset[]Mặc định: —{ label, range: () => ({ from, to }) } — hiện cạnh lịch, xếp trên lịch khi màn hẹp.
presetsLabelstringMặc định: "Date range presets"Nhãn nhóm preset cho trình đọc màn hình.
DEFAULT_RANGE_PRESETSDateRangePreset[]Mặc định: —Hôm nay, 7 ngày qua, 30 ngày qua, Tháng này (tới hôm nay), Tháng trước.
numberOfMonthsnumberMặc định: 2Số tháng hiển thị; nên 1 trên mobile.
value / onValueChange / minDate / maxDate / clearable…—Mặc định: —Như DateRangePicker (xem trang DatePicker).

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

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

Placeholder khi chưa chọn khoảng ngày.

Mặc định (tiếng Anh)"Select a date range…"messagesVi"Chọn khoảng ngày…"
clearstring

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

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

Nhãn nhóm preset cho trình đọc màn hình.

Mặc định (tiếng Anh)"Date range presets"messagesVi"Chọn nhanh khoảng ngày"
todaystring

Nhãn các preset trong DEFAULT_RANGE_PRESETS.

Mặc định (tiếng Anh)"Today"messagesVi"Hôm nay"
last7DaysstringMặc định (tiếng Anh)"Last 7 days"messagesVi"7 ngày qua"
last30DaysstringMặc định (tiếng Anh)"Last 30 days"messagesVi"30 ngày qua"
thisMonthstringMặc định (tiếng Anh)"This month"messagesVi"Tháng này"
lastMonthstringMặc định (tiếng Anh)"Last month"messagesVi"Tháng trước"