前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载DateRangePicker 是 rsuite 中用于快速输入或选择一个日期和时间范围的组件同时支持鼠标选择与键盘输入。本文围绕 docs/pages/components/date-range-picker/zh-CN/index.md 的完整知识骨架展开结合组件源码 src/DateRangePicker 中的实现细节系统讲解获取组件、格式化、尺寸外观、整周整月选择、禁用日期工具函数、受控与非受控、响应式与可访问性等主题。读完本文你将掌握 DateRangePicker 的全部核心 Props并能像源码那样组合出满足复杂业务约束的日期范围选择方案。获取组件DateRangePicker 作为 rsuite 的顶层组件导出与其他组件一样直接从rsuite包导入即可无需额外安装子包import { DateRangePicker } from rsuite;组件类型定义与导出入口位于 src/DateRangePicker/index.tsx核心实现见 src/DateRangePicker/DateRangePicker.tsx。需要注意禁用日期相关的工具方法如allowedMaxDays、beforeToday、combine也是挂在DateRangePicker静态属性上的直接通过解构获取const { combine, allowedMaxDays, beforeToday } DateRangePicker;基础演示与核心用法默认最简单的用法是不传任何 Props直接渲染const App () DateRangePicker /;此时组件使用默认格式dd/MM/yyyy、默认外观default、默认尺寸md用户点击输入框弹出双日历面板选择开始日期后再选择结束日期。自定义日期格式通过format属性可以自由控制展示的日期格式character属性用于自定义两个日期之间的分隔符默认 ~ 。下面的示例展示了从纯日期、带时间、到 12 小时制的多种组合import { DateRangePicker, Stack } from rsuite; const App () ( Stack spacing{10} directioncolumn alignItemsflex-start DateRangePicker formatMM/dd/yyyy character – / DateRangePicker formatdd.MM.yyyy / DateRangePicker formatMMM dd, yyyy / DateRangePicker formatMMMM dd, yyyy / DateRangePicker formatyyyy年MM月dd日 / DateRangePicker formatMM/dd/yyyy HH:mm / DateRangePicker formatMM/dd/yyyy hh:mm aa showMeridiem / DateRangePicker formatMMM yyyy caretAs{BsCalendar2MonthFill} ranges{[]} / DateRangePicker formatHH:mm:ss caretAs{FaClock} ranges{[]} / /Stack );要点说明format支持yyyy、MM、dd、HH、mm、ss、aa上午/下午等 token也可混入中文等任意文本字符。showMeridiem用于显示 12 小时制的时间格式与format中的aa配合使用。caretAs可以替换右侧箭头图标例如换成时钟、月历图标ranges{[]}表示清空默认快捷项使面板更纯粹。尺寸size支持lg、md、sm、xs四档默认mdDateRangePicker sizelg placeholderLarge / DateRangePicker sizemd placeholderMedium / DateRangePicker sizesm placeholderSmall / DateRangePicker sizexs placeholderXsmall /外观appearance支持default与subtle两种默认default。subtle外观下输入框的边框与背景更弱化适合融入工具栏等紧凑场景DateRangePicker appearancedefault placeholderDefault w{230} / DateRangePicker appearancesubtle placeholderSubtle w{230} /撑满与占位符block布尔属性设置为true时组件撑满整行块级布局。placeholder没有值时的默认显示文本。还可以配合w宽度等样式控制实现布局。选择整周、整月hoverRange用于点击日期时直接选中一段预定义范围支持三种形态形态说明week点击任意日期时自动选中整个星期month点击任意日期时自动选中整个月(date: Date) [Date, Date]自定义函数根据点击的日期计算范围import { subDays } from date-fns/subDays; import { addDays } from date-fns/addDays; DateRangePicker hoverRangeweek ranges{[]} / DateRangePicker hoverRangeweek isoWeek ranges{[]} / DateRangePicker hoverRangeweek weekStart{3} ranges{[]} / DateRangePicker hoverRangemonth ranges{[]} / DateRangePicker ranges{[]} hoverRange{date [subDays(date, 1), addDays(date, 1)]} /关于星期的起点需要注意两个相互作用的属性isoWeek遵循 ISO 8601 标准每个日历星期从星期一开始星期日为第 7 天。参考 hover-range 示例中的第二个示例。weekStart一周第一天的索引0 为星期日1 为星期一依此类推默认0。该属性自 v5.62.0 起提供当设置了isoWeek时weekStart会被忽略。例如weekStart{3}表示一周从星期三开始。因此整周从星期几开始完全可由你控制是hoverRangeweek的核心配套能力。一键选值oneTaponeTap允许用户点击一次就选定日期范围常与hoverRange配合使用。它特别适合选单个星期 / 单个自然月这类短交互场景const ranges [ { label: today, value: [new Date(), new Date()] }, { label: yesterday, value: [subDays(new Date(), 1), subDays(new Date(), 1)] } ]; DateRangePicker oneTap showOneCalendar ranges{ranges} / DateRangePicker oneTap showOneCalendar hoverRangeweek ranges{[]} / DateRangePicker oneTap showOneCalendar hoverRangeweek isoWeek ranges{[]} / DateRangePicker oneTap showOneCalendar hoverRangeweek weekStart{3} ranges{[]} / DateRangePicker oneTap showOneCalendar hoverRangemonth ranges{[]} /示例中同时使用了showOneCalendar只显示一个日历来配合单次点击的轻量交互。显示周数与单个日历showWeekNumbers布尔属性在日历面板上显示周数。showOneCalendar布尔属性让弹出面板只显示一个日历默认是两个。注意文档中的类型写法为boolen实际按 boolean 使用即可。禁用与只读shouldDisableDate 与工具函数函数签名shouldDisableDate是一个函数类型属性它会在渲染日历以及选择日期的地方调用可以根据业务自定义需要禁用的选项。完整签名如下shouldDisableDate( date: Date, // 用于判断是否需要禁用的日期 selectDate: ArrayDate, // 选择的日期 selectedDone: boolean, // 当前是否选择完成。如果为 false, 则只选择了开始日期等待选择结束日期 target: CALENDAR | TOOLBAR_BUTTON_OK | TOOLBAR_SHORTCUT | INPUT // shouldDisableDate 调用的位置 ) booleantarget用于标识该函数被调用的位置——日历渲染、点击确定按钮、点击快捷项、输入框输入时都会触发校验这使禁用逻辑可以在不同交互路径上保持一致。类型定义DisabledDateFunction见 src/DateRangePicker/types.ts实际禁用逻辑实现在 src/DateRangePicker/disabledDateUtils.ts。内置禁用工具方法为了更方便地设置需要禁用的日期DateRangePicker提供了一组静态工具方法方法类型描述after(date?: string \| Date) boolean禁用指定日期之后的日期afterToday() boolean禁用今天之后的日期allowedDays(days: number) boolean只允许指定的天数其他日期都禁用allowedMaxDays(days: number) boolean允许指定的最多天数其他日期都禁用allowedRange(startDate: string \| Date, endDate: string \| Date) boolean允许指定的日期范围其他日期都禁用before(date?: string \| Date) boolean禁用指定日期之前的日期beforeToday() boolean禁用今天之前的日期combine(...args) boolean用于组合多个条件组合使用示例import { DateRangePicker } from rsuite; const { combine, allowedMaxDays, beforeToday } DateRangePicker; DateRangePicker shouldDisableDate{combine(allowedMaxDays(7), beforeToday())} /上面的写法同时满足两个约束最多只能选 7 天且不能选今天之前的日期。源码视角allowedMaxDays / allowedDays 的实现原理在 src/DateRangePicker/disabledDateUtils.ts 中allowedMaxDays(days)的实现以已选中的开始日期为基准通过DateUtils.addDays(f, -days 1)与DateUtils.addDays(f, days - 1)计算允许区间的两端再借助isAfterDay/isBeforeDay判断目标日期是否越界并且只在target CALENDAR且尚未选择完成!selectedDone时返回禁用export function allowedMaxDays(days: number): DisabledDateFunction { return (date, selectValue, selectedDone, target): boolean { let beforeLimit false; let afterLimit false; if (selectValue?.[0]) { const startDate selectValue[0]; beforeLimit composeFunctions( f DateUtils.addDays(f, -days 1), f isAfterDay(f, date) )(startDate); afterLimit composeFunctions( f DateUtils.addDays(f, days - 1), f isBeforeDay(f, date) )(startDate); } if (target CALENDAR !selectedDone (beforeLimit || afterLimit)) { return true; } return false; }; }而allowedDays(days)使用!DateUtils.isSameDay判断目标日期是否落在以开始日期为中心、前后各days天的窗口内并要求beforeLimit afterLimit同时成立才禁用。可以看到这些工具方法都不是简单地一刀切而是借助selectDate与selectedDone动态响应选择进度——这正是shouldDisableDate签名的价值所在。完整的演示代码还覆盖了disabled整组件禁用、readOnly只读、plaintext纯文本展示三种形态以及自定义禁用函数写法DateRangePicker disabled / DateRangePicker shouldDisableDate{date isAfter(date, new Date())} / DateRangePicker shouldDisableDate{allowedMaxDays(7)} / DateRangePicker shouldDisableDate{allowedDays(7)} / DateRangePicker shouldDisableDate{allowedRange(2020-10-01, 2021-10-01)} / DateRangePicker shouldDisableDate{beforeToday()} / DateRangePicker shouldDisableDate{afterToday()} / DateRangePicker readOnly defaultValue{[new Date(), new Date()]} / DateRangePicker plaintext defaultValue{[new Date(), new Date()]} /禁用输入与加载中状态DateRangePicker默认是可以通过键盘输入日期和时间的editable默认true渲染为 Input 输入框。如果希望禁用键盘编辑、只允许通过日历选择可以设置DateRangePicker editable{false} /此外loading默认false可以在组件上显示加载中状态指示器label属性可在按钮开头显示一个标签。自定义快捷键rangesranges用于配置弹出层中的快捷项默认包含今天、昨天、最近 7 天三项。其类型为Range[]每个项包含label与value两个字段。文档给出的默认值构造方式如下import { startOfDay, endOfDay, addDays, subDays } from date-fns; const Ranges [ { label: today, value: [startOfDay(new Date()), endOfDay(new Date())] }, { label: yesterday, value: [startOfDay(addDays(new Date(), -1)), endOfDay(addDays(new Date(), -1))] }, { label: last7Days, value: [startOfDay(subDays(new Date(), 6)), endOfDay(new Date())] } ];自定义时参考上述结构即可例如只保留最近 3 天或新增本季度。onShortcutClick(shortcut: Range, event)回调会在点击快捷项时触发。清空默认快捷项用ranges{[]}在格式化、整周整月等示例中频繁出现。受控与非受控的值与 React 常规模式一致受控传入value与onChange由外部状态驱动。onChange的回调签名为(value: [Date, Date]) void。非受控只传defaultValue由组件内部维护状态。defaultCalendarValue设置默认日历面板日期未选择时的初始展示范围。const [value, setValue] React.useState([ new Date(2017-02-01 01:00:00), new Date(2017-02-02 14:00:00) ]); DateRangePicker value{value} onChange{setValue} / DateRangePicker value{value} onChange{setValue} showMeridiem formatyyyy-MM-dd HH:mm:ss defaultCalendarValue{[new Date(2022-02-01 00:00:00), new Date(2022-03-01 23:59:59)]} / DateRangePicker defaultValue{[new Date(), new Date()]} /其余回调还包括onOk点击确定后、onClean清除值后、onOpen/onClose、onEnter/onEntering/onEntered/onExit/onExiting/onExited动画过渡生命周期、onSelect选择日期时。其他展示与行为属性自定义日历图标caretAs替换右侧箭头图标见前文格式化示例。自定义渲染值renderValue(date: [Date, Date], format: string) string可完全接管输入框展示文本renderCell(date: Date) ReactNodev5.77.0 起可自定义日历面板上的日期单元格renderTitle(date, calendarKey)可自定义日历面板上的月份标题。不显示头部showHeader默认true控制日历面板头部是否显示格式化的日期范围v5.52.0 起提供设置为false可隐藏头部。时间粒度隐藏hideHours/hideMinutes/hideSeconds均自 v5.71.0 起分别以(value: number, date: Date) boolean的形式隐藏指定的小时、分钟、秒选项。日历吸附calendarSnappingv5.69.0 起为true时如果用户先选择右侧日历上的日期则会自动切换到左侧日历上继续选择。年份限制limitEndYear默认1000与limitStartYear相对当前选择日期设置可选年份的上下限。分隔符character默认 ~ 可清除cleanable默认true。其他通用属性container渲染容器、open/defaultOpen受控/非受控展开、placement默认bottomStart完整取值见 Placement 类型 中引用的_common/types/placement.md、preventOverflow防止浮动元素溢出、popupClassName/popupStyle弹出层样式、locale国际化详见 i18n 指南 的 DateTimeFormats、monthDropdownProps月份下拉框属性类型见MonthDropdownProps。响应式小屏自动变全宽 Drawer在超小屏幕上弹出层默认显示为全宽 Drawerresponsive默认true。当选择器已经位于 Modal 或 Drawer 中时可设置responsive{false}保持定位浮层避免嵌套遮罩造成层级混乱。响应式示例代码见 examples/responsive.tsx。可访问性AccessibilityARIA 属性默认拥有 DateRangeInput 组件的 ARIA 属性当值无效时aria-invalidtrue属性被添加到input元素。当设置了label时aria-labelledby属性被添加到input元素和dialog元素上并将值设置为label的id属性值。拥有aria-haspopupdialog属性用于指示组件拥有一个可交互的弹出层。键盘交互默认拥有 DateRangeInput 组件的键盘交互支持通过键盘输入日期和时间在editable开启时、方向键在日历中移动焦点等标准操作具体行为与 DateInput 一致。完整 Props 速查表属性名称类型(默认值)描述版本appearancedefault | subtle(default)设置外观blockboolean堵塞整行calendarSnappingbooleantrue时先选右侧日历日期会自动切换到左侧日历v5.69.0caretAsElementType自定义右侧箭头图标的组件characterstring( ~ )两个日期之间的分隔符cleanableboolean(true)可以清除选择值containerHTMLElement | (() HTMLElement)设置渲染的容器defaultCalendarValue[Date, Date]默认日历面板日期defaultOpenboolean默认打开defaultValue[Date, Date]默认值非受控disabledboolean禁用组件editableboolean(true)渲染为 Input 输入框可以通过键盘输入日期formatstring(dd/MM/yyyy)日期显示格式化hideHours(hour: number, date: Date) boolean隐藏指定的小时选项v5.71.0hideMinutes(minute: number, date: Date) boolean隐藏指定的分钟选项v5.71.0hideSeconds(second: number, date: Date) boolean隐藏指定的秒选项v5.71.0hoverRangeweek | month | (date: Date) [Date, Date]点击日期时选中的日期范围isoWeekbooleanISO 8601 标准每个日历星期从星期一开始星期日为第 7 天labelReactNode在按钮开头显示的标签limitEndYearnumber(1000)相对当前选择日期设置可选年份上限limitStartYearnumber相对当前选择日期设置可选年份下限loadingboolean(false)是否显示加载中状态指示器localeDateTimeFormats定义本地化设置popupClassNamestring自定义弹出框的 CSS 类名popupStyleCSSProperties自定义弹出框的样式monthDropdownPropsMonthDropdownProps月份下拉框属性onChange(value: [Date, Date]) void值改变后的回调函数onClean(event) void清除值后的回调函数onClose() void关闭回调函数onEnter / onEntered / onEntering() void显示前/后/中动画过渡回调oneTapboolean是否点击一次就选定日期范围可配合 hoverRange 使用onExit / onExited / onExiting() void退出前/后/中动画过渡回调onOk(value: [Date, Date]) void点击确定按钮后的回调onOpen() void打开回调函数onSelect(data: Date) void选择日期的回调函数onShortcutClick(shortcut: Range, event) void点击快捷项的回调函数openboolean打开受控placeholderstring没有值时默认显示内容placementPlacement(bottomStart)显示位置preventOverflowboolean防止浮动元素溢出rangesRange[]默认今天,昨天最近 7 天快捷项配置renderCell(date: Date) ReactNode自定义渲染日历面板上的日期单元格v5.77.0renderTitle(date: Date, calendarKey: start | end) ReactNode自定义渲染日历面板上的月份标题renderValue(date: [Date, Date], format: string) string自定义渲染值responsiveboolean(true)是否在超小屏幕上将弹出层显示为全宽 DrawershouldDisableDateDisabledDateFunction禁用日期showHeaderboolean(true)是否在日历面板头部显示格式化的日期范围v5.52.0showMeridiemboolean显示 12 小时制的时间格式showOneCalendarboolen显示一个日历showWeekNumbersboolean显示周数sizelg | md | sm | xs(md)设置组件尺寸value[Date, Date]当前值受控weekStart0 | 1 | 2 | 3 | 4 | 5 | 6(0)一周的第一天索引0 为星期日设置了 isoWeek 时忽略此属性v5.62.0相关类型定义ts:DisabledDateFunctiontype DisabledDateFunction ( date: Date, // 用于判断是否需要禁用的日期 selectDate?: Value, // 选择的日期 selectedDone?: boolean, // 是否选择完成为 false 时只选择了开始日期等待选择结束日期 target?: DATERANGE_DISABLED_TARGET // 调用位置 ) boolean;ts:Rangesimport { startOfDay, endOfDay, addDays, subDays } from date-fns; const Ranges [ { label: today, value: [startOfDay(new Date()), endOfDay(new Date())] }, { label: yesterday, value: [startOfDay(addDays(new Date(), -1)), endOfDay(addDays(new Date(), -1))] }, { label: last7Days, value: [startOfDay(subDays(new Date(), 6)), endOfDay(new Date())] } ];延伸阅读DateRangePicker 英文文档禁用日期工具函数的源码实现src/DateRangePicker/disabledDateUtils.ts组件类型定义src/DateRangePicker/types.ts组件测试用例src/DateRangePicker/test/DateRangePicker.spec.tsx 与 src/DateRangePicker/test/disabledDateUtils.spec.tsx赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐RSuite DateRangePicker 日期范围选择器实战指南从基础用法到禁用规则与快捷键定制RSuite DateRangePicker 日期范围选择器实战指南从基础用法到禁用规则与快捷键定制 DateRangePicker 是 RSuite 组件库前端UI组件rsuite DateRangePicker 完整指南日期时间范围选择器的配置、禁用策略与无障碍实现rsuite DateRangePicker 完整指南日期时间范围选择器的配置、禁用策略与无障碍实现 DateRangePicker 是 rsuite 中用于前端UI组件rsuite DateRangePicker 的 block 属性让日期范围选择器铺满整行的实战指南rsuite DateRangePicker 的 block 属性让日期范围选择器铺满整行的实战指南 日期范围选择器DateRangePicker默认以“前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
rsuite DateRangePicker 日期范围选择器完整指南：从基础用法到源码级禁用逻辑
前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载DateRangePicker 是 rsuite 中用于快速输入或选择一个日期和时间范围的组件同时支持鼠标选择与键盘输入。本文围绕 docs/pages/components/date-range-picker/zh-CN/index.md 的完整知识骨架展开结合组件源码 src/DateRangePicker 中的实现细节系统讲解获取组件、格式化、尺寸外观、整周整月选择、禁用日期工具函数、受控与非受控、响应式与可访问性等主题。读完本文你将掌握 DateRangePicker 的全部核心 Props并能像源码那样组合出满足复杂业务约束的日期范围选择方案。获取组件DateRangePicker 作为 rsuite 的顶层组件导出与其他组件一样直接从rsuite包导入即可无需额外安装子包import { DateRangePicker } from rsuite;组件类型定义与导出入口位于 src/DateRangePicker/index.tsx核心实现见 src/DateRangePicker/DateRangePicker.tsx。需要注意禁用日期相关的工具方法如allowedMaxDays、beforeToday、combine也是挂在DateRangePicker静态属性上的直接通过解构获取const { combine, allowedMaxDays, beforeToday } DateRangePicker;基础演示与核心用法默认最简单的用法是不传任何 Props直接渲染const App () DateRangePicker /;此时组件使用默认格式dd/MM/yyyy、默认外观default、默认尺寸md用户点击输入框弹出双日历面板选择开始日期后再选择结束日期。自定义日期格式通过format属性可以自由控制展示的日期格式character属性用于自定义两个日期之间的分隔符默认 ~ 。下面的示例展示了从纯日期、带时间、到 12 小时制的多种组合import { DateRangePicker, Stack } from rsuite; const App () ( Stack spacing{10} directioncolumn alignItemsflex-start DateRangePicker formatMM/dd/yyyy character – / DateRangePicker formatdd.MM.yyyy / DateRangePicker formatMMM dd, yyyy / DateRangePicker formatMMMM dd, yyyy / DateRangePicker formatyyyy年MM月dd日 / DateRangePicker formatMM/dd/yyyy HH:mm / DateRangePicker formatMM/dd/yyyy hh:mm aa showMeridiem / DateRangePicker formatMMM yyyy caretAs{BsCalendar2MonthFill} ranges{[]} / DateRangePicker formatHH:mm:ss caretAs{FaClock} ranges{[]} / /Stack );要点说明format支持yyyy、MM、dd、HH、mm、ss、aa上午/下午等 token也可混入中文等任意文本字符。showMeridiem用于显示 12 小时制的时间格式与format中的aa配合使用。caretAs可以替换右侧箭头图标例如换成时钟、月历图标ranges{[]}表示清空默认快捷项使面板更纯粹。尺寸size支持lg、md、sm、xs四档默认mdDateRangePicker sizelg placeholderLarge / DateRangePicker sizemd placeholderMedium / DateRangePicker sizesm placeholderSmall / DateRangePicker sizexs placeholderXsmall /外观appearance支持default与subtle两种默认default。subtle外观下输入框的边框与背景更弱化适合融入工具栏等紧凑场景DateRangePicker appearancedefault placeholderDefault w{230} / DateRangePicker appearancesubtle placeholderSubtle w{230} /撑满与占位符block布尔属性设置为true时组件撑满整行块级布局。placeholder没有值时的默认显示文本。还可以配合w宽度等样式控制实现布局。选择整周、整月hoverRange用于点击日期时直接选中一段预定义范围支持三种形态形态说明week点击任意日期时自动选中整个星期month点击任意日期时自动选中整个月(date: Date) [Date, Date]自定义函数根据点击的日期计算范围import { subDays } from date-fns/subDays; import { addDays } from date-fns/addDays; DateRangePicker hoverRangeweek ranges{[]} / DateRangePicker hoverRangeweek isoWeek ranges{[]} / DateRangePicker hoverRangeweek weekStart{3} ranges{[]} / DateRangePicker hoverRangemonth ranges{[]} / DateRangePicker ranges{[]} hoverRange{date [subDays(date, 1), addDays(date, 1)]} /关于星期的起点需要注意两个相互作用的属性isoWeek遵循 ISO 8601 标准每个日历星期从星期一开始星期日为第 7 天。参考 hover-range 示例中的第二个示例。weekStart一周第一天的索引0 为星期日1 为星期一依此类推默认0。该属性自 v5.62.0 起提供当设置了isoWeek时weekStart会被忽略。例如weekStart{3}表示一周从星期三开始。因此整周从星期几开始完全可由你控制是hoverRangeweek的核心配套能力。一键选值oneTaponeTap允许用户点击一次就选定日期范围常与hoverRange配合使用。它特别适合选单个星期 / 单个自然月这类短交互场景const ranges [ { label: today, value: [new Date(), new Date()] }, { label: yesterday, value: [subDays(new Date(), 1), subDays(new Date(), 1)] } ]; DateRangePicker oneTap showOneCalendar ranges{ranges} / DateRangePicker oneTap showOneCalendar hoverRangeweek ranges{[]} / DateRangePicker oneTap showOneCalendar hoverRangeweek isoWeek ranges{[]} / DateRangePicker oneTap showOneCalendar hoverRangeweek weekStart{3} ranges{[]} / DateRangePicker oneTap showOneCalendar hoverRangemonth ranges{[]} /示例中同时使用了showOneCalendar只显示一个日历来配合单次点击的轻量交互。显示周数与单个日历showWeekNumbers布尔属性在日历面板上显示周数。showOneCalendar布尔属性让弹出面板只显示一个日历默认是两个。注意文档中的类型写法为boolen实际按 boolean 使用即可。禁用与只读shouldDisableDate 与工具函数函数签名shouldDisableDate是一个函数类型属性它会在渲染日历以及选择日期的地方调用可以根据业务自定义需要禁用的选项。完整签名如下shouldDisableDate( date: Date, // 用于判断是否需要禁用的日期 selectDate: ArrayDate, // 选择的日期 selectedDone: boolean, // 当前是否选择完成。如果为 false, 则只选择了开始日期等待选择结束日期 target: CALENDAR | TOOLBAR_BUTTON_OK | TOOLBAR_SHORTCUT | INPUT // shouldDisableDate 调用的位置 ) booleantarget用于标识该函数被调用的位置——日历渲染、点击确定按钮、点击快捷项、输入框输入时都会触发校验这使禁用逻辑可以在不同交互路径上保持一致。类型定义DisabledDateFunction见 src/DateRangePicker/types.ts实际禁用逻辑实现在 src/DateRangePicker/disabledDateUtils.ts。内置禁用工具方法为了更方便地设置需要禁用的日期DateRangePicker提供了一组静态工具方法方法类型描述after(date?: string \| Date) boolean禁用指定日期之后的日期afterToday() boolean禁用今天之后的日期allowedDays(days: number) boolean只允许指定的天数其他日期都禁用allowedMaxDays(days: number) boolean允许指定的最多天数其他日期都禁用allowedRange(startDate: string \| Date, endDate: string \| Date) boolean允许指定的日期范围其他日期都禁用before(date?: string \| Date) boolean禁用指定日期之前的日期beforeToday() boolean禁用今天之前的日期combine(...args) boolean用于组合多个条件组合使用示例import { DateRangePicker } from rsuite; const { combine, allowedMaxDays, beforeToday } DateRangePicker; DateRangePicker shouldDisableDate{combine(allowedMaxDays(7), beforeToday())} /上面的写法同时满足两个约束最多只能选 7 天且不能选今天之前的日期。源码视角allowedMaxDays / allowedDays 的实现原理在 src/DateRangePicker/disabledDateUtils.ts 中allowedMaxDays(days)的实现以已选中的开始日期为基准通过DateUtils.addDays(f, -days 1)与DateUtils.addDays(f, days - 1)计算允许区间的两端再借助isAfterDay/isBeforeDay判断目标日期是否越界并且只在target CALENDAR且尚未选择完成!selectedDone时返回禁用export function allowedMaxDays(days: number): DisabledDateFunction { return (date, selectValue, selectedDone, target): boolean { let beforeLimit false; let afterLimit false; if (selectValue?.[0]) { const startDate selectValue[0]; beforeLimit composeFunctions( f DateUtils.addDays(f, -days 1), f isAfterDay(f, date) )(startDate); afterLimit composeFunctions( f DateUtils.addDays(f, days - 1), f isBeforeDay(f, date) )(startDate); } if (target CALENDAR !selectedDone (beforeLimit || afterLimit)) { return true; } return false; }; }而allowedDays(days)使用!DateUtils.isSameDay判断目标日期是否落在以开始日期为中心、前后各days天的窗口内并要求beforeLimit afterLimit同时成立才禁用。可以看到这些工具方法都不是简单地一刀切而是借助selectDate与selectedDone动态响应选择进度——这正是shouldDisableDate签名的价值所在。完整的演示代码还覆盖了disabled整组件禁用、readOnly只读、plaintext纯文本展示三种形态以及自定义禁用函数写法DateRangePicker disabled / DateRangePicker shouldDisableDate{date isAfter(date, new Date())} / DateRangePicker shouldDisableDate{allowedMaxDays(7)} / DateRangePicker shouldDisableDate{allowedDays(7)} / DateRangePicker shouldDisableDate{allowedRange(2020-10-01, 2021-10-01)} / DateRangePicker shouldDisableDate{beforeToday()} / DateRangePicker shouldDisableDate{afterToday()} / DateRangePicker readOnly defaultValue{[new Date(), new Date()]} / DateRangePicker plaintext defaultValue{[new Date(), new Date()]} /禁用输入与加载中状态DateRangePicker默认是可以通过键盘输入日期和时间的editable默认true渲染为 Input 输入框。如果希望禁用键盘编辑、只允许通过日历选择可以设置DateRangePicker editable{false} /此外loading默认false可以在组件上显示加载中状态指示器label属性可在按钮开头显示一个标签。自定义快捷键rangesranges用于配置弹出层中的快捷项默认包含今天、昨天、最近 7 天三项。其类型为Range[]每个项包含label与value两个字段。文档给出的默认值构造方式如下import { startOfDay, endOfDay, addDays, subDays } from date-fns; const Ranges [ { label: today, value: [startOfDay(new Date()), endOfDay(new Date())] }, { label: yesterday, value: [startOfDay(addDays(new Date(), -1)), endOfDay(addDays(new Date(), -1))] }, { label: last7Days, value: [startOfDay(subDays(new Date(), 6)), endOfDay(new Date())] } ];自定义时参考上述结构即可例如只保留最近 3 天或新增本季度。onShortcutClick(shortcut: Range, event)回调会在点击快捷项时触发。清空默认快捷项用ranges{[]}在格式化、整周整月等示例中频繁出现。受控与非受控的值与 React 常规模式一致受控传入value与onChange由外部状态驱动。onChange的回调签名为(value: [Date, Date]) void。非受控只传defaultValue由组件内部维护状态。defaultCalendarValue设置默认日历面板日期未选择时的初始展示范围。const [value, setValue] React.useState([ new Date(2017-02-01 01:00:00), new Date(2017-02-02 14:00:00) ]); DateRangePicker value{value} onChange{setValue} / DateRangePicker value{value} onChange{setValue} showMeridiem formatyyyy-MM-dd HH:mm:ss defaultCalendarValue{[new Date(2022-02-01 00:00:00), new Date(2022-03-01 23:59:59)]} / DateRangePicker defaultValue{[new Date(), new Date()]} /其余回调还包括onOk点击确定后、onClean清除值后、onOpen/onClose、onEnter/onEntering/onEntered/onExit/onExiting/onExited动画过渡生命周期、onSelect选择日期时。其他展示与行为属性自定义日历图标caretAs替换右侧箭头图标见前文格式化示例。自定义渲染值renderValue(date: [Date, Date], format: string) string可完全接管输入框展示文本renderCell(date: Date) ReactNodev5.77.0 起可自定义日历面板上的日期单元格renderTitle(date, calendarKey)可自定义日历面板上的月份标题。不显示头部showHeader默认true控制日历面板头部是否显示格式化的日期范围v5.52.0 起提供设置为false可隐藏头部。时间粒度隐藏hideHours/hideMinutes/hideSeconds均自 v5.71.0 起分别以(value: number, date: Date) boolean的形式隐藏指定的小时、分钟、秒选项。日历吸附calendarSnappingv5.69.0 起为true时如果用户先选择右侧日历上的日期则会自动切换到左侧日历上继续选择。年份限制limitEndYear默认1000与limitStartYear相对当前选择日期设置可选年份的上下限。分隔符character默认 ~ 可清除cleanable默认true。其他通用属性container渲染容器、open/defaultOpen受控/非受控展开、placement默认bottomStart完整取值见 Placement 类型 中引用的_common/types/placement.md、preventOverflow防止浮动元素溢出、popupClassName/popupStyle弹出层样式、locale国际化详见 i18n 指南 的 DateTimeFormats、monthDropdownProps月份下拉框属性类型见MonthDropdownProps。响应式小屏自动变全宽 Drawer在超小屏幕上弹出层默认显示为全宽 Drawerresponsive默认true。当选择器已经位于 Modal 或 Drawer 中时可设置responsive{false}保持定位浮层避免嵌套遮罩造成层级混乱。响应式示例代码见 examples/responsive.tsx。可访问性AccessibilityARIA 属性默认拥有 DateRangeInput 组件的 ARIA 属性当值无效时aria-invalidtrue属性被添加到input元素。当设置了label时aria-labelledby属性被添加到input元素和dialog元素上并将值设置为label的id属性值。拥有aria-haspopupdialog属性用于指示组件拥有一个可交互的弹出层。键盘交互默认拥有 DateRangeInput 组件的键盘交互支持通过键盘输入日期和时间在editable开启时、方向键在日历中移动焦点等标准操作具体行为与 DateInput 一致。完整 Props 速查表属性名称类型(默认值)描述版本appearancedefault | subtle(default)设置外观blockboolean堵塞整行calendarSnappingbooleantrue时先选右侧日历日期会自动切换到左侧日历v5.69.0caretAsElementType自定义右侧箭头图标的组件characterstring( ~ )两个日期之间的分隔符cleanableboolean(true)可以清除选择值containerHTMLElement | (() HTMLElement)设置渲染的容器defaultCalendarValue[Date, Date]默认日历面板日期defaultOpenboolean默认打开defaultValue[Date, Date]默认值非受控disabledboolean禁用组件editableboolean(true)渲染为 Input 输入框可以通过键盘输入日期formatstring(dd/MM/yyyy)日期显示格式化hideHours(hour: number, date: Date) boolean隐藏指定的小时选项v5.71.0hideMinutes(minute: number, date: Date) boolean隐藏指定的分钟选项v5.71.0hideSeconds(second: number, date: Date) boolean隐藏指定的秒选项v5.71.0hoverRangeweek | month | (date: Date) [Date, Date]点击日期时选中的日期范围isoWeekbooleanISO 8601 标准每个日历星期从星期一开始星期日为第 7 天labelReactNode在按钮开头显示的标签limitEndYearnumber(1000)相对当前选择日期设置可选年份上限limitStartYearnumber相对当前选择日期设置可选年份下限loadingboolean(false)是否显示加载中状态指示器localeDateTimeFormats定义本地化设置popupClassNamestring自定义弹出框的 CSS 类名popupStyleCSSProperties自定义弹出框的样式monthDropdownPropsMonthDropdownProps月份下拉框属性onChange(value: [Date, Date]) void值改变后的回调函数onClean(event) void清除值后的回调函数onClose() void关闭回调函数onEnter / onEntered / onEntering() void显示前/后/中动画过渡回调oneTapboolean是否点击一次就选定日期范围可配合 hoverRange 使用onExit / onExited / onExiting() void退出前/后/中动画过渡回调onOk(value: [Date, Date]) void点击确定按钮后的回调onOpen() void打开回调函数onSelect(data: Date) void选择日期的回调函数onShortcutClick(shortcut: Range, event) void点击快捷项的回调函数openboolean打开受控placeholderstring没有值时默认显示内容placementPlacement(bottomStart)显示位置preventOverflowboolean防止浮动元素溢出rangesRange[]默认今天,昨天最近 7 天快捷项配置renderCell(date: Date) ReactNode自定义渲染日历面板上的日期单元格v5.77.0renderTitle(date: Date, calendarKey: start | end) ReactNode自定义渲染日历面板上的月份标题renderValue(date: [Date, Date], format: string) string自定义渲染值responsiveboolean(true)是否在超小屏幕上将弹出层显示为全宽 DrawershouldDisableDateDisabledDateFunction禁用日期showHeaderboolean(true)是否在日历面板头部显示格式化的日期范围v5.52.0showMeridiemboolean显示 12 小时制的时间格式showOneCalendarboolen显示一个日历showWeekNumbersboolean显示周数sizelg | md | sm | xs(md)设置组件尺寸value[Date, Date]当前值受控weekStart0 | 1 | 2 | 3 | 4 | 5 | 6(0)一周的第一天索引0 为星期日设置了 isoWeek 时忽略此属性v5.62.0相关类型定义ts:DisabledDateFunctiontype DisabledDateFunction ( date: Date, // 用于判断是否需要禁用的日期 selectDate?: Value, // 选择的日期 selectedDone?: boolean, // 是否选择完成为 false 时只选择了开始日期等待选择结束日期 target?: DATERANGE_DISABLED_TARGET // 调用位置 ) boolean;ts:Rangesimport { startOfDay, endOfDay, addDays, subDays } from date-fns; const Ranges [ { label: today, value: [startOfDay(new Date()), endOfDay(new Date())] }, { label: yesterday, value: [startOfDay(addDays(new Date(), -1)), endOfDay(addDays(new Date(), -1))] }, { label: last7Days, value: [startOfDay(subDays(new Date(), 6)), endOfDay(new Date())] } ];延伸阅读DateRangePicker 英文文档禁用日期工具函数的源码实现src/DateRangePicker/disabledDateUtils.ts组件类型定义src/DateRangePicker/types.ts组件测试用例src/DateRangePicker/test/DateRangePicker.spec.tsx 与 src/DateRangePicker/test/disabledDateUtils.spec.tsx赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐RSuite DateRangePicker 日期范围选择器实战指南从基础用法到禁用规则与快捷键定制RSuite DateRangePicker 日期范围选择器实战指南从基础用法到禁用规则与快捷键定制 DateRangePicker 是 RSuite 组件库前端UI组件rsuite DateRangePicker 完整指南日期时间范围选择器的配置、禁用策略与无障碍实现rsuite DateRangePicker 完整指南日期时间范围选择器的配置、禁用策略与无障碍实现 DateRangePicker 是 rsuite 中用于前端UI组件rsuite DateRangePicker 的 block 属性让日期范围选择器铺满整行的实战指南rsuite DateRangePicker 的 block 属性让日期范围选择器铺满整行的实战指南 日期范围选择器DateRangePicker默认以“前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
