日期选择器

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

安装

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

导入

用法

禁用

只读

必填

变体

标签位置

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

注意: 如果未传递 label，则 labelPlacement 属性将默认为 outside。

带有描述

您可以通过传递 description 属性来为日期选择器添加描述。

带有错误消息

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

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

带有月份和年份选择器

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

带有时间字段

选择器图标

您可以使用 selector 在日期选择器的开头和结尾添加内容。

选择器按钮位置

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

受控

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

时区

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

@internationalized/date 包含用于将多种格式的字符串解析为 ZonedDateTime 对象的函数。

粒度

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

@internationalized/date 包含用于将多种格式的字符串解析为 ZonedDateTime 对象的函数。

最小日期和最大日期

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

@internationalized/date 包含用于将多种格式的字符串解析为 ZonedDateTime 对象的函数。

国际日历

DatePicker 支持选择全球多种日历系统中的日期，包括公历、希伯来历、印度历、伊斯兰历、佛教历等等。日期会根据用户的区域设置自动以相应的日历系统显示。可以使用传递给 Unicode 日历区域扩展 的方式，覆盖默认的日历系统，或者通过 I18nProvider 组件来实现。

@internationalized/date 包含用于将多种格式的字符串解析为 ZonedDateTime 对象的函数。

不可用日期

DatePicker 支持将某些日期标记为不可用。用户不能选择这些日期，并且在日历中会以删除线显示。在日期字段中，如果用户输入了不可用的日期，则会显示无效状态。

@internationalized/date 包含用于将多种格式的字符串解析为 ZonedDateTime 对象的函数。

可见月份

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

页面行为

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

预设值

@internationalized/date 包含用于将多种格式的字符串解析为 ZonedDateTime 对象的函数。

插槽

• base：输入包装器，处理对齐、位置和整体外观。
• selectorButton：选择器按钮元素。
• selectorIcon：选择器图标元素。
• popoverContent：日历弹出框元素。
• calendar：日历元素。
• calendarContent：日历的内容元素。
• timeInputLabel：时间输入组件的标签元素。
• timeInput：时间输入组件元素。

数据属性

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

• data-slot：所有插槽都具有此属性。指示元素代表哪个插槽（例如 calendar）。
• data-open：指示日历弹出框是否打开。
• data-invalid：当日期选择器无效时。基于 isInvalid 属性。
• data-required：当日期选择器为必填项时。基于 isRequired 属性。
• data-readonly：当日期选择器为只读时。基于 isReadOnly 属性。
• data-disabled：当日期选择器被禁用时。基于 isDisabled 属性。

可访问性

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

API

DatePicker 属性

日期选择器事件