日期输入框

DateInput 是一个允许用户使用键盘输入和编辑日期和时间值的组件。日期值的每个部分都显示在单独可编辑的段中。

安装

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

导入

使用

禁用

只读

必填

变体

标签位置

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

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

起始 & 结束内容

您可以使用 startContent 和 endContent 属性在 DateInput 的开头和结尾添加内容。

带有描述

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

带有错误消息

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

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

受控

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

时区

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

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

粒度

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

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

最小日期和最大日期

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

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

国际日历

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

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

隐藏时区

当将 ZonedDateTime 对象作为值提供给 DateInput 时，默认情况下会显示时区缩写。但是，如果它在其他地方显示或基于用例是隐式的，则可以使用 hideTimeZone 选项将其隐藏。

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

小时周期

默认情况下，DateInput 根据用户的区域设置以 12 小时或 24 小时格式显示时间。但是，如果特定用例需要，可以使用 hourCycle 属性覆盖此设置。此示例强制 DateInput 使用 24 小时制，而与区域设置无关。

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

插槽

• base：输入框的包装器，它处理对齐、放置和总体外观。
• label：日期输入框的标签，它是显示在日期输入框上方、内部或左侧的标签。
• inputWrapper：包裹 label（当它在内部时）和 innerWrapper。
• input：日期输入元素。
• innerWrapper：包裹 input、startContent 和 endContent。
• clearButton：清除按钮，它位于输入框的末尾。
• helperWrapper：包裹 description 和 errorMessage。
• description：日期输入框的描述。
• errorMessage：日期输入框的错误消息。

数据属性

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

• data-slot：所有插槽都具有此属性。表示元素代表哪个插槽（例如 slot）。
• data-invalid：当日期输入框无效时。基于 isInvalid 属性。
• data-required：当日期输入框为必填项时。基于 isRequired 属性。
• data-readonly：当日期输入框为只读时。基于 isReadOnly 属性。
• data-disabled：当日期输入框被禁用时。基于 isDisabled 属性。
• data-has-helper：当日期输入框具有辅助文本（errorMessage 或 description）时。基于这两个属性。
• data-has-start-content：当日期输入框具有起始内容时。基于 startContent 属性。
• data-has-end-content：当日期输入框具有结束内容时。基于 endContent 属性。

无障碍性

• 使用原生 <input> 元素构建。
• 视觉和 ARIA 标签支持。
• 更改、剪贴板、组合、选择和输入事件支持。
• 必填和无效状态通过 ARIA 暴露给辅助技术。
• 支持通过 ARIA 链接到输入框的描述和错误消息帮助文本。
• 每个日期和时间单位都显示为单独可聚焦和可编辑的段，这允许用户以简便的方式使用键盘以任何日期格式和区域设置编辑日期。
• 日期段可以使用易于使用的数字键盘进行编辑，并且所有交互都可以使用基于触摸的屏幕阅读器进行访问。

API

DateInput 属性

DateInput 事件