DatePicker

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

安装

npx nextui-cli@latest add date-picker

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

导入

用法

禁用

只读

必填

变体

标签位置

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

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

带描述

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

带错误消息

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

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

带月和年选择器

带时间字段

选择器图标

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

受控

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

时区

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

@internationalized/date 包含将字符串解析为 ZonedDateTime 对象的函数。

npm install @internationalized/date

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

粒度

granularity 属性允许您控制 DatePicker 显示的最小单位。默认情况下，值以“天”粒度（年、月和日）显示，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";

国际日历

DatePicker 支持选择世界各地使用的多种日历系统中的日期，包括公历、希伯来历、印度历、伊斯兰历、佛教历等等。日期会根据用户的区域设置自动显示在相应的日历系统中。日历系统可以通过使用 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";

不可用日期

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

@internationalized/date 包含将字符串解析为 ZonedDateTime 对象的函数。

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

import {today, isWeekend, getLocalTimeZone} from "@internationalized/date";
import {useLocale} from "@react-aria/i18n";

可见月份

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

页面行为

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

预设

@internationalized/date 包含将字符串解析为 ZonedDateTime 对象的函数。

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

import {
  DateValue,
  now,
  useLocale,
  startOfWeek,
  startOfMonth,
  useDateFormatter,
  getLocalTimeZone,
} from "@internationalized/date";
import {I18nProvider} from "@react-aria/i18n";

插槽

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

数据属性

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

• data-slot: 所有插槽都有此属性。它表示元素代表的插槽（例如 canlendar）。
• data-open: 指示日历弹出框是否打开。
• data-invalid: 当日期选择器无效时。基于 isInvalid 属性。
• data-required: 当日期选择器是必需的时。基于 isRequired 属性。
• data-readonly: 当日期选择器处于只读状态时。基于 isReadOnly 属性。
• data-disabled: 当日期选择器处于禁用状态时。基于 isDisabled 属性。

无障碍性

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

API

DatePicker 属性

DatePicker 事件