日期范围选择器

日期范围选择器结合了两个日期输入框和一个范围日历弹出框，允许用户输入或选择日期和时间范围。

安装

上面的命令仅用于单独安装。如果 @nextui-org/react 已全局安装，您可以跳过此步骤。

导入

用法

禁用

只读

必填

如果将 isRequired 属性传递给输入框，标签末尾会有一个 danger 星号，并且该输入框将变为必填。

变体

可见月份

默认情况下，日历弹出框显示单个月份。如果屏幕空间允许，visibleMonths 属性允许一次显示最多 3 个月份。

页面行为

默认情况下，当按下“下一个”或“上一个”按钮时，分页将按照 visibleMonths 值前进。可以通过将 pageBehavior 设置为 single 来更改此行为，使其改为按单月分页。

标签位置

可以通过将 labelPlacement 属性设置为 inside、outside 或 outside-left 来更改标签的位置。

注意：如果没有传递 label，则 labelPlacement 属性默认设置为 outside。

带有描述

可以通过传递 description 属性来为输入框添加描述。

带有错误消息

您可以组合使用 isInvalid 和 errorMessage 属性来显示无效输入。

您还可以将错误消息作为函数传递。这允许基于 ValidationResult 进行动态错误消息处理。

带有月份和年份选择器

您可以通过将 showMonthAndYearPickers 属性设置为 true 来在日历弹出框中显示月份和年份选择器。但是，如果将大于 1 的数字传递给 visibleMonths 属性，则会禁用此功能。

带有时间字段

当提供 CalendarDateTime 或 ZonedDateTime 对象作为值时，DateRangePicker 会自动包含时间字段。

选择器图标

您可以使用 selector 属性在日期范围选择器的开始和结束位置添加内容。

选择器按钮位置

您可以通过将 selectorButtonPlacement 属性设置为 start 或 end 来更改选择器按钮的位置。

受控组件

您可以使用 value 和 onChange 属性来控制输入值。

时区

当提供 ZonedDateTime 对象作为值时，DateRangePicker 会感知时区。在这种情况下，会显示时区缩写，并且在操作值时会考虑夏令时等时区问题。

@internationalized/date 包含将多种格式的字符串解析为 ZonedDateTime 对象的功能。

粒度

粒度属性允许您控制 DateRangePicker 显示的最小单位。默认情况下，该值以“天”粒度显示（年、月和日），CalendarDateTime 和 ZonedDateTime 值以“分钟”粒度显示。

@internationalized/date 包含将多种格式的字符串解析为 ZonedDateTime 对象的功能。

最小日期和最大日期

minValue 和 maxValue 属性也可用于确保值在特定范围内。

@internationalized/date 包含将多种格式的字符串解析为 ZonedDateTime 对象的功能。

国际日历

DateRangePicker 支持选择世界各地使用的多种日历系统中的日期，包括公历、希伯来历、印度历、伊斯兰历、佛教历等。日期会自动以用户区域设置的适当日历系统显示。可以使用传递给 Unicode 日历区域扩展（传递给 I18nProvider 组件）来覆盖日历系统。

@internationalized/date 包含将多种格式的字符串解析为 ZonedDateTime 对象的功能。

不可用日期

DateRangePicker 支持将某些日期标记为不可用。用户无法选择这些日期，并且在日历中会以划掉的外观显示。在日期字段中，如果用户输入了不可用的日期，则会显示无效状态。

@internationalized/date 包含将多种格式的字符串解析为 ZonedDateTime 对象的功能。

不连续范围

allowsNonContiguousRanges 属性允许选择范围，即使中间有不可用的日期。onChange 事件中发出的值仍然是具有开始和结束属性的单个范围，但不可用的日期不会显示为已选择。应用程序需要根据业务逻辑将完整的选定范围拆分为多个范围。

@internationalized/date 包含将多种格式的字符串解析为 ZonedDateTime 对象的功能。

预设

@internationalized/date 包含将多种格式的字符串解析为 ZonedDateTime 对象的功能。

插槽

• base: 基础元素。它处理对齐、放置和一般外观。
• label: 日期范围选择器的标签，它显示在日期输入框的上方、内部或左侧。
• calendar: 日历元素。
• selectorButton: 选择器按钮元素。
• selectorIcon: 选择器图标元素。
• popoverContent: 日历弹出框元素。
• calendarContent: 日历的内容元素。
• inputWrapper: 包装 label（当它在内部时）和 innerWrapper。
• input: 输入元素。
• segment: 段元素。
• separator: 分隔符元素。
• bottomContent: 底部内容元素。
• timeInputWrapper: 输入元素的包装元素。
• helperWrapper: 包裹 description 和 errorMessage 的元素。
• description: 日期输入的描述。
• errorMessage: 日期输入的错误消息。

自定义样式

您可以通过将自定义的 Tailwind CSS 类传递给组件插槽来自定义 DateRangePicker 组件。

数据属性

DateRangePicker 在 base 元素上具有以下属性

• data-slot: 所有插槽都有此属性。表示元素所代表的插槽（例如，canlendar）。
• data-open: 指示日历弹出框是否打开。
• data-invalid: 当日期范围选择器无效时。基于 isInvalid 属性。
• data-required: 当日期范围选择器是必需的时。基于 isRequired 属性。
• data-readonly: 当日期范围选择器是只读的时。基于 isReadOnly 属性。
• data-disabled: 当日期范围选择器被禁用时。基于 isDisabled 属性。
• data-has-start-content: 当日期范围选择器具有起始内容时。基于 startContent 属性。
• data-has-end-content: 当日期范围选择器具有结束内容时。基于 endContent 属性。
• data-has-multiple-months: 当日期范围选择器的 visibleMonth 大于 2 时。

辅助功能

• 每个日期和时间单位都显示为可单独聚焦和编辑的段，这使用户可以使用键盘以任何日期格式和区域设置轻松编辑日期
• 用户还可以打开日历弹出框，以在标准月份网格中选择日期范围。包含本地化的屏幕阅读器消息，以在选择和可见日期范围更改时进行通知。
• 可以使用易于使用的数字键盘编辑日期段，可以通过在日历中使用触摸屏拖动日期来选择日期范围，并且所有交互都可以使用基于触摸的屏幕阅读器访问。
• 与 HTML 表单集成，支持必填、最小值和最大值、不可用日期、自定义验证函数、实时验证和服务器端验证错误

API

DateRangePicker 属性

DateRangePicker 事件