范围日期选择器

查看源代码

用于日期范围选择的组件，支持选择开始和结束日期。

演示

import {
  DateRangePicker,
  CalendarPrev,
  CalendarNext,
  CalendarTitle,
  CalendarGrid,
  DateRangePickerCalendar,
  DateRangePickerTrigger,
} from "@resolid/react-ui";

export default function App() {
  return (
    <DateRangePicker placeholder="选择范围日期">
      <DateRangePickerTrigger className="min-w-50" />
      <DateRangePickerCalendar>
        <div className="flex gap-1">
          <CalendarPrev />
          <CalendarTitle />
          <CalendarNext />
        </div>
        <CalendarGrid />
      </DateRangePickerCalendar>
    </DateRangePicker>
  );
}

用法

import {
  DateRangePicker,
  DateRangePickerTrigger,
  DateRangePickerCalendar,
  CalendarTitle,
  CalendarPrev,
  CalendarNext,
  CalendarGrid,
} from "@resolid/react-ui";
  • DateRangePicker: 包含范围日期选择器的所有部分。
  • DateRangePickerTrigger: 范围日期选择器的触发部分。
  • DateRangePickerCalendar: 范围日期选择器的日历部分。
  • CalendarPrev: 日历导航按钮。它根据当前日历视图，导航一个月/一年/十年前的日历。
  • CalendarNext: 日历导航按钮。它根据当前日历视图，导航一个月/年/十年后的日历。
  • CalendarTitle: 日历的当前日期标题部分。
  • CalendarGrid: 日历的网格部分。
<DateRangePicker>
  <DateRangePickerTrigger />
  <DateRangePickerCalendar>
    <div className="flex">
      <CalendarPrev />
      <CalendarTitle />
      <CalendarNext />
    </div>
    <CalendarGrid />
  </DateRangePickerCalendar>
</DateRangePicker>

特点

  • 完整的键盘导航
  • 可控值与默认值
  • 完整焦点管理
  • 本地化支持
  • 高度可组合性

举例

可控值

你选择了范围日期：2026-03-15 to 2026-03-26

import {
  DateRangePicker,
  DateRangePickerTrigger,
  DateRangePickerCalendar,
  CalendarPrev,
  CalendarNext,
  CalendarTitle,
  CalendarGrid,
} from "@resolid/react-ui";
import { useState } from "react";

export default function App() {
  const [value, setValue] = useState("2026-03-15 to 2026-03-26");

  return (
    <div className="flex flex-col gap-2">
      <p className="text-sm">你选择了范围日期：{value}</p>
      <DateRangePicker value={value} onChange={setValue} placeholder="选择范围日期">
        <DateRangePickerTrigger className="min-w-50" />
        <DateRangePickerCalendar>
          <div className="flex gap-1">
            <CalendarPrev />
            <CalendarTitle />
            <CalendarNext />
          </div>
          <CalendarGrid />
        </DateRangePickerCalendar>
      </DateRangePicker>
    </div>
  );
}

月选择

import {
  DateRangePicker,
  DateRangePickerTrigger,
  DateRangePickerCalendar,
  CalendarPrev,
  CalendarNext,
  CalendarTitle,
  CalendarGrid,
} from "@resolid/react-ui";

export default function App() {
  return (
    <DateRangePicker view="year" format="YYYY-MM" placeholder="选择范围月份">
      <DateRangePickerTrigger className="min-w-50" />
      <DateRangePickerCalendar>
        <div className="flex gap-1">
          <CalendarPrev />
          <CalendarTitle />
          <CalendarNext />
        </div>
        <CalendarGrid />
      </DateRangePickerCalendar>
    </DateRangePicker>
  );
}

年选择

import {
  DateRangePicker,
  DateRangePickerTrigger,
  DateRangePickerCalendar,
  CalendarPrev,
  CalendarNext,
  CalendarTitle,
  CalendarGrid,
} from "@resolid/react-ui";

export default function App() {
  return (
    <DateRangePicker view="decade" format="YYYY" placeholder="选择范围年份">
      <DateRangePickerTrigger className="min-w-50" />
      <DateRangePickerCalendar>
        <div className="flex gap-1">
          <CalendarPrev />
          <CalendarTitle />
          <CalendarNext />
        </div>
        <CalendarGrid />
      </DateRangePickerCalendar>
    </DateRangePicker>
  );
}

无效日期

import {
  DateRangePicker,
  DateRangePickerTrigger,
  DateRangePickerCalendar,
  CalendarPrev,
  CalendarNext,
  CalendarTitle,
  CalendarGrid,
} from "@resolid/react-ui";
import { isWeekend } from "@resolid/utils/date";

export default function App() {
  return (
    <DateRangePicker isDateUnavailable={(d) => isWeekend(d)} placeholder="选择范围日期">
      <DateRangePickerTrigger className="min-w-50" />
      <DateRangePickerCalendar>
        <div className="flex gap-1">
          <CalendarPrev />
          <CalendarTitle />
          <CalendarNext />
        </div>
        <CalendarGrid />
      </DateRangePickerCalendar>
    </DateRangePicker>
  );
}

属性

属性
name

字段的名称, 提交表单时使用

类型string默认值必须false
属性
value

受控值

类型string | null默认值必须false
属性
defaultValue

默认值

类型string默认值必须false
属性
onChange

onChange 回调

类型(value: string | null) => void默认值必须false
属性
minValue

最小值

类型string | null默认值必须false
属性
maxValue

最大值

类型string | null默认值必须false
属性
open

受控打开状态

类型boolean默认值必须false
属性
defaultOpen

初始渲染时的默认打开状态

类型boolean默认值false必须false
属性
onOpenChange

打开状态改变时调用

类型(open: boolean) => void默认值必须false
属性
view

日历视图

类型"decade" | "month" | "year"默认值"month"必须false
属性
focusedValue

聚焦日期

类型string | null默认值必须false
属性
defaultFocusedValue

默认聚焦日期

类型string | null默认值必须false
属性
onFocusedValueChange

聚焦日期变化回调

类型(date: string) => void默认值必须false
属性
format

日期格式

| Token | 示例 | 说明 |

|-------|------|------|

| `YYYY` | 2026 | 4 位年份 |

| `YY` | 26 | 2 位年份 |

|-------|------|------|

| `MMMM` | 三月/March | 完整月份名（本地化） |

| `MMM` | 3月/Mar | 缩写月份名（本地化） |

| `MM` | 03 | 2 位月份数字 |

| `M` | 3 | 月份数字 |

|-------|------|------|

| `DD` | 06 | 2 位日期数字 |

| `D` | 6 | 日期数字 |

|-------|------|------|

| `dddd` | 星期五/Friday | 完整星期名（本地化） |

| `ddd` | 周五/Fri | 缩写星期名（本地化） |

| `d` | 五/F | 单字符星期名（本地化） |

类型string默认值"YYYY-MM-DD"必须false
属性
separator

日期之间的分隔符

类型string默认值" to "必须false
属性
size

大小

类型"xs" | "sm" | "md" | "lg" | "xl"默认值"md"必须false
属性
duration

动画持续时间

类型number默认值250必须false
属性
disabled

是否禁用

类型boolean默认值false必须false
属性
required

是否必需

类型boolean默认值false必须false
属性
readOnly

是否只读

类型boolean默认值false必须false
属性
invalid

是否无效

类型boolean默认值false必须false
属性
closeOnSelect

选中后关闭

类型boolean默认值true必须false
属性
dualPanel

是否双面板

类型boolean默认值false必须false
属性
firstWeekContains

一年第一周必须包含的最小日期

类型1 | 4默认值1必须false
属性
isDateDisabled

判断日期是否禁用

类型(date: Date, view: CalendarView) => boolean默认值必须false
属性
isDateUnavailable

判断日期是否无效

类型(date: Date, view: CalendarView) => boolean默认值必须false
属性
placeholder

占位符

类型string默认值必须false
属性
showWeekNumbers

是否显示周数

类型boolean默认值false必须false
属性
weekdayFormat

星期显示格式

- "long": "Sunday", "Monday", "Tuesday", etc.

- "short": "Sun", "Mon", "Tue", etc.

- "narrow": "S", "M", "T", etc.

类型"long" | "short" | "narrow"默认值'narrow'必须false
属性
weekStartsOn

一周的第一天

`0` - 周日 `1` - 周一 `2` - 周二 `3` - 周三 `4` - 周四 `5` - 周五 `6` - 周六

类型0 | 1 | 2 | 3 | 4 | 5 | 6默认值0必须false

建议更改此页面