Date
DateRangePicker with a list of quick range presets next to the calendar.
Pass
presets (an array of { label, range: () => ({ from, to }) }) to show quick choices next to the calendar; on narrow screens the list sits above it. DEFAULT_RANGE_PRESETS contains today, the last 7 days, the last 30 days, this month and last month, always computed from the current date; their labels follow messages.dateRangePicker of YugenProvider. The preset that matches the selected range is marked (aria-pressed); presets outside minDate / maxDate are disabled. All existing DateRangePicker props still work.Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { DateRangePicker, DEFAULT_RANGE_PRESETS, type DateRangePreset } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Custom presets & maxDate
maxDate is today, so “Next 30 days” is disabled.
Usage
Do
- Keep to the 3–6 presets used most in your domain; people can still pick dates on the calendar.
- Compute the range inside
range()(not as a constant) so presets stay correct for the current date.
Don't
- Don't add presets for future ranges when maxDate is today: they will be disabled.
- Don't use vague preset labels ("Recent"). State the number of days or months.
Props
| Prop · Type | Default | Description |
|---|---|---|
| presetsDateRangePreset[] | Default: — | { label, range: () => ({ from, to }) }, shown next to the calendar and above it on narrow screens. |
| presetsLabelstring | Default: "Date range presets" | Label of the preset group for screen readers. |
| DEFAULT_RANGE_PRESETSDateRangePreset[] | Default: — | Today, last 7 days, last 30 days, this month (up to today), last month. |
| numberOfMonthsnumber | Default: 2 | Number of months shown; 1 works better on mobile. |
| value / onValueChange / minDate / maxDate / clearable…— | Default: — | As in DateRangePicker (see the DatePicker page). |
Messages
Text built into the component: labels, aria-labels, screen reader announcements.
English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.
messages.dateRangePicker
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| placeholderstring Placeholder khi chưa chọn khoảng ngày. | Default (English)"Select a date range…" | messagesVi"Chọn khoảng ngày…" |
| clearstring aria-label nút xoá giá trị ( | Default (English)"Clear" | messagesVi"Xoá giá trị" |
| presetsstring Nhãn nhóm preset cho trình đọc màn hình. | Default (English)"Date range presets" | messagesVi"Chọn nhanh khoảng ngày" |
| todaystring Nhãn các preset trong | Default (English)"Today" | messagesVi"Hôm nay" |
| last7Daysstring | Default (English)"Last 7 days" | messagesVi"7 ngày qua" |
| last30Daysstring | Default (English)"Last 30 days" | messagesVi"30 ngày qua" |
| thisMonthstring | Default (English)"This month" | messagesVi"Tháng này" |
| lastMonthstring | Default (English)"Last month" | messagesVi"Tháng trước" |