范围日期选择器

查看源代码

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

演示

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
属性
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

建议更改此页面