DateRangePicker
date-range-pickerSelects a start and end date from a dual-month range calendar.
Usage
Basic usage
Click the trigger to pop up the bi-monthly calendar, select the starting and ending ends in order to determine the range.
<DateRangePicker defaultValue={["2026-06-08", "2026-06-20"]} />Controlled
The external controlled value is [start, end] (ISO YYYY-MM-DD), clear and return null.
const [range, setRange] = useState<DateRangeValue | null>(["2026-06-08", "2026-06-20"]);
<DateRangePicker value={range} onValueChange={setRange} />No quick preset
presets={false} Hide the "Today/Last 7 Days..." default column on the left.
<DateRangePicker defaultValue={["2026-06-03", "2026-06-09"]} presets={false} />Limited range + disabled weekends
minDate / maxDate frame the optional range, and disabledDate further prohibits certain days.
<DateRangePicker
defaultValue={["2026-06-10", "2026-06-12"]}
minDate="2026-06-01"
maxDate="2026-06-30"
disabledDate={(iso) => {
const day = new Date(iso + "T00:00:00").getDay();
return day === 0 || day === 6;
}}
/>Disabled
The whole page is grayed out and the trigger cannot be opened.
<DateRangePicker defaultValue={["2026-06-01", "2026-06-15"]} disabled />When to use
Use DateRangePicker to select a start and end date with two months shown side by side and presets for Today, Last 7 Days, Last 30 Days, and This Month. Use DatePicker for one date, DateTimePicker for date and time, or Calendar for an always-visible month panel. The HulianUI date family has no external date-picker dependency and uses fixed-width string values.
Import
import { DateRangePicker } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | [string, string] | null | — | Controlled value [start, end] (ISO YYYY-MM-DD); null = cleared; controlled when passed in |
| defaultValue | [string, string] | null | — | uncontrolled initial value |
| minDate | string | — | The earliest selectable date (ISO), any date earlier than this is prohibited. |
| maxDate | string | — | The latest selectable date (ISO), no selection later than this date |
| disabledDate | (isoDate: string) => boolean | — | Customize to disable a certain day, the input parameter is ISO YYYY-MM-DD |
| presets | boolean | DateRangePreset[] | true | true or omitted uses four presets with built-in Chinese labels: "\u4eca\u5929" (Today), "\u6700\u8fd1 7 \u5929" (Last 7 Days), "\u6700\u8fd1 30 \u5929" (Last 30 Days), and "\u672c\u6708" (This Month). Pass an array for custom presets or false to hide them. |
| placeholder | [string, string] | ["\u5f00\u59cb\u65e5\u671f", "\u7ed3\u675f\u65e5\u671f"] | Built-in Chinese placeholders meaning “Start date” and “End date.” |
| displayFormat | string | "YYYY-MM-DD" | Display format (dayjs format); the external controlled value is always ISO YYYY-MM-DD |
| disabled | boolean | false | Disable |
| readOnly | boolean | false | Read only: can be opened for viewing, no endpoint selection/no preset/no clearing |
| className | string | — | Container class name |
Events
| Event | Type | Description |
|---|---|---|
| onValueChange | (range: [string, string] | null) => void | Interval changes (including clearing → null) |
DateRangePreset: { label: string; getValue: () => [string, string] }, called when clicked, can be dynamically calculated based on "today".
Usage guidelines
- Choose controlled or uncontrolled usage. Pair
valuewithonValueChange; usedefaultValueonly for an uncontrolled initial range, and do not pass both. - The external value is always an array of ISO
YYYY-MM-DDstrings, not Date objects.displayFormatchanges presentation only. disabledDatereceives an ISO date string. For weekday calculations, usenew Date(iso + "T00:00:00")and account for the local timezone. Avoidnew Date(iso), which parses as UTC and can shift the calendar day.
Related
Calendar · DatePicker · DateTimePicker · TimeField · Button · ShimmerButton
Playground
<DateRangePicker
value={range}
onValueChange={setRange}
/>