DateInput

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

安装

npx nextui-cli@latest add date-input

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

导入

用法

禁用

只读

必填

变体

标签位置

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

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

开始和结束内容

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

带描述

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

带错误消息

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

您也可以将错误消息作为函数传递。这允许根据 ValidationResult 动态处理错误消息。

受控

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

时区

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

@internationalized/date 包含将字符串解析为 ZonedDateTime 对象的函数，这些函数支持多种格式。

npm install @internationalized/date

import {parseZonedDateTime} from "@internationalized/date";

粒度

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

@internationalized/date 包含将字符串解析为 ZonedDateTime 对象的函数，这些函数支持多种格式。

npm install @internationalized/date @react-aria/i18n

import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
import {useDateFormatter} from "@react-aria/i18n";

最小日期和最大日期

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

@internationalized/date 包含将字符串解析为 ZonedDateTime 对象的函数，这些函数支持多种格式。

npm install @internationalized/date

import {getLocalTimeZone, parseDate, today} from "@internationalized/date";

国际日历

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

@internationalized/date 包含将字符串解析为 ZonedDateTime 对象的函数，这些函数支持多种格式。

npm install @internationalized/date @react-aria/i18n

import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
import {I18nProvider} from "@react-aria/i18n";

隐藏时区

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

@internationalized/date 包含将字符串解析为 ZonedDateTime 对象的函数，这些函数支持多种格式。

npm install @internationalized/date

import {parseZonedDateTime} from "@internationalized/date";

小时周期

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

@internationalized/date 包含将字符串解析为 ZonedDateTime 对象的函数，这些函数支持多种格式。

npm install @internationalized/date

import {parseZonedDateTime} from "@internationalized/date";

插槽

• 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 事件