Introducing KickStart —  AI generated FormKit forms in seconds. Generate from a screenshot, edit with drag-and-drop or conversational AI, copy & paste as components or schema!
Try for free

专业安装快速启动 :rocket:

基本示例

datepicker 输入允许用户从可定制的日历中选择日期,并且可以直接在输入框中输入日期,完全支持国际化。

日期选择器概览

5 分钟

加载实时示例

模式

FormKit 使用独特的掩码解决方案,允许用户通过键入日期到日期选择器输入框(同时限制可用选项仅为有效值)或通过日历输入选择他们的日期。

双重输入

  • 文本输入 - 默认情况下,用户可以点击或者用 Tab 键进入显示日期的任何“部分”(月、日、年等)并输入他们想要的值。匹配的值将显示自动完成。除了键入,用户还可以使用上/下箭头键来循环浏览每个部分的可用选项。
  • 选择器输入 - 通过点击输入框右侧的“日历”图标,用户还可以显示一个日历弹出窗口来视觉上选择他们的日期:
加载实时示例
占位符 & 覆盖层

要在双重输入模式下显示占位符,你必须启用掩码 overlay。在 picker-only 模式启用时,这不是必需的。了解更多关于掩码和覆盖层的信息

仅选择器

你可以禁用文本输入机制,并确保某人使用日期选择器对话框来输入他们的日期,通过添加 picker-only 属性。在 picker-only 模式下,点击输入框将立即打开对话框。此外,使用 overlay 对于占位符支持并不是必需的:

加载实时示例

日期格式

日期选择器支持 Intl.DateTimeFormat 的“样式化日期”,以及基于令牌的日期格式。要更改显示给用户的格式,请修改 format 属性。

样式化格式

如果您的受众是国际性的,您应该考虑坚持使用“样式化日期”,因为它们是每个地区最自然的日期格式。日期选择器的默认格式是 long

format 属性可以接受像 longmedium 这样的简单字符串,在这种情况下,它使用相应的 Intl.DateTimeFormat dateStyle。或者,您可以提供一个具有 datetime 属性及其各自的 Intl.DateTimeFormat 样式的对象({ date: 'long', time: 'short' })。

加载实时示例

日期样式

使用 format 属性启用以下任何日期样式:

格式样式示例
fullWednesday, March 1, 2023, Mercoledì 1 marzo 2023
longMarch 1, 2023, 1 marzo 2023
mediumMar 6, 2023, 6 mar 2023
short3/1/23, 1/3/23

时间样式

格式样式示例
long7:05:00 PM, 19:05:00
medium7:05:00 PM, 19:05:00
short7:05 PM, 19:05

令牌格式

您可以使用 format 属性来明确设置一个令牌化的日期格式。令牌格式由一个字符串表示,其中包含任意字符和下表中的一个或多个字符串。

FormKit 与 Intl.DateTimeFormat 接口,根据当前的 locale 自动国际化令牌。例如,对于 2000-01-01,令牌 MMMM 将为 en 地区产生 January,但为 zh 地区产生 一月

需要日期

使用令牌时,可能会创建无法解析的日期。例如,如果您的输入只显示星期几(dddd)。您只能在 picker-only 模式下使用不可解析的日期格式。如果您希望用户能够输入他们的日期,您的格式必须至少包括一个月、日和年的令牌。

令牌示例描述
YY99, 23, 002位数年份
YYYY1999, 2023, 21004位数年份
M1, 12月份 1-12
MM01, 12月份 01-12
MMMJan, Feb简称 1月-12月
MMMMJanuary, February全称 1月 - 12月
D1, 9, 22月份中的日 1-31
DD01, 09, 22月份中的日 01-31
dM, T, W, T, F, S, S单位数日 "T"
dddThu, Sat简称星期 "Thu"
ddddMonday, Tuesday全称星期 "Wednesday"
H0, 13, 23最小小时位数,24小时制,0-23
HH00, 13, 232小时位数,24小时制,00-23
h12, 1, 11最小小时位数,12小时制,1-12
hh12, 01, 112小时位数,12小时制,01-12
m1, 59分钟 0-59
mm01, 59分钟 00-59
s1, 59秒 0-59
ss01, 59秒 00-59
aam, pm上午/下午
AAM, PM上午/下午
国际化

尽管 FormKit 会自动国际化您的令牌 — 如果您的表单面向广泛的国际受众,请考虑使用日期样式而不是令牌,因为这会在许多地区导致更易读的日期。

加载实时示例

转义标记

要在格式中包含本身就是标记的字母(如 a),您可以在该字符前加上反斜杠 \ 来转义这些标记:

加载实时示例

面板顺序

日期选择器的日历弹出窗口有四个“面板”:

  • day — 显示一个传统的日历视图,可以选择一个月中的每一天。
  • month — 显示一年中的12个月份。
  • year — 一次显示十年的年份。
  • time — 显示一天中的时间。

当用户打开日期选择器的弹出窗口时,他们将看到一个或多个这些面板。您可以通过提供 sequence 属性来修改显示给用户的面板以及这些面板应该显示的顺序。默认的 sequence 值是 ['day'](这允许您导航到 monthyear 面板)。

例如,在选择生日时,自然是先选择出生年份,然后是月份,然后是日期。sequence 属性允许这种行为:

加载实时示例

选择时间

time 面板可以用来允许用户选择一天中的特定时间。如果您选择了包含时间的 format(如 YYYY-MM-DD HH:mm),您可能会希望将 time 面板包含在您的顺序中:

加载实时示例

与所有输入一样,日期选择器的 value 既是日期选择器产生的内容,也是读回到日期选择器中进行填充的内容。默认情况下,值的格式是一个 UTC 标准化的 ISO8601 字符串(例如:2014-11-27T03:59:00.000Z)。然而,这种格式可以通过使用 value-format 属性更改为任何受支持的日期样式或上面列出的标记格式。

一个合理的问题是,为什么不总是使用 ISO8601?尽管它是处理日期的最流行方式 — 它对机器和人都可读 — 但它并不是非常适合人类阅读。例如,如果您的表单向餐饮业务发送联系请求电子邮件,那么 ISO8601 可能不是最佳选择。

完整日期

值格式必须包含重新构建日期对象所需的所有必要数据,至少包括月份、日期、年份。如果您的输入请求用户提供的信息在您的值格式中没有表示,那么这些细节将会丢失。

日期样式

要将日期样式作为值使用,只需将您想要使用的样式传递给 value-format 属性:

加载实时示例

格式化令牌

值也可以通过使用格式化令牌以任意格式表示:

加载实时示例

设置值(填充)

传递给日期选择器的值必须:

  1. 与当前 value-locale 中的 value-format 相匹配,或者
  2. 是一个原生的 JavaScript Date 对象。

尽管原生的 Date 对象始终被接受为日期选择器的有效输入,但它们将立即转换为指定的 value-format

匹配 value-format

加载实时示例

使用原生 Date

加载实时示例

值区域设置

由于需要使用创建它的同一区域设置来解析值的格式,建议在定义自定义 value-format 时始终指定 value-locale。这确保了无论用户输入日期的区域设置是什么,值都将保持一致:

时区与区域设置

更改 value-locale 不会影响所选日期的 timezone。请参阅下面的时区文档以获取进一步的解释。

加载实时示例

时区

在任何软件环境中,尤其是基于浏览器的 JavaScript 中,时间都是一个非常难以处理的问题。datepicker 提供了一些选项来帮助解决这些挑战。

时区、日期和格式案例研究

为了在 JavaScript 中处理日期和时间,了解 Date 对象的基础知识是有用的。JavaScript 中的 date 对象本质上是一个 Unix 时间戳(自 1970年1月1日 00:00:00Z 起的毫秒数)。然而,它总是本地化到客户端的时间。这种本地化以与 UTC 的偏移量表示。您浏览器的当前时间是:

客户端(浏览器)时间

当偏移量应用于“时钟时间”时,您将得到 UTC 的当前时间:

UTC

当在日期选择器中使用 value-format 令牌时,这些令牌将使用客户端的时区操作。例如,如果您的格式请求 HH 令牌,它将返回:

HH 格式令牌

将其与上面的日期进行比较,您会看到它与本地时间的 小时 部分相同。为什么这很重要?请继续阅读。

案例研究

让我们考虑一个位于阿姆斯特丹(UTC +100/+200)的餐厅预订应用。它是游客的热门目的地,他们通常会在出行前几周进行预订(当时他们还在自己的国家)。

日期选择器默认情况下会要求游客选择他们希望预订的日期和时间——但(默认情况下)选择的将是他们的本地时间,而不是阿姆斯特丹的时间。即使value-format输出的是UTC,时间也不会是阿姆斯特丹的预定时间(除非他们恰好在同一时区)。

一般来说,有两种解决这个问题的方案:

选项 1:不确定时间

使用一个“不确定”的时间(有时被称为“墙上时间”)。不确定时间是没有与底层Unix时间戳明确关联的时间。例如,3月13日下午2点不是UTC,也没有明确的偏移量。3月13日下午2点描述了一个特定时间在不确定的位置/时区。只要你不在值中使用偏移量(Z),你可以使用格式标记(YYYY-MM-DD HH:mm)来实现这一点。

这对我们的餐厅应用程序来说是可行的,只要后端能够将适当的时区或偏移量附加到这个不确定时间2023-03-13 14:00 GMT+0100,以得到适当的UTC时间(这个虚构的应用程序在其数据库中所需的)。对于后端开发人员来说,剩下的挑战是知道应用于日期的偏移量,以确保它变成“阿姆斯特丹时间”(由于Europe/Amsterdam的夏令时,这个偏移量会根据一年中的时间而变化)。

选项 2:使用日期选择器的timezone属性

另一种方法是,日期选择器的timezone属性会自动为你进行偏移校正。只需声明日期选择器为“哪里”选择时间——在我们的例子中是timezone="Europe/Amsterdam"。用户的体验不会有任何变化,但他们选择的时间将是目标时区的时间。一个在America/New_York+0400)的用户在他们的日期选择器中选择3月13日下午2点,将产生一个UTC值2023-03-13T13:00:00Z,这是阿姆斯特丹的下午2点。这允许你使用UTC格式简单地存储和恢复你的日期。

不确定时区

默认情况下,日期选择器在选择时使用客户端的本地时区。输出值由value-format决定(见上文)——默认情况下,这是一个UTC标准化的ISO8601字符串。然而,通过指定自定义格式,你可以实现一个“不确定”的时间(也称为“墙上时间”)。这是一个没有与给定时区明确关联的日期和/或时间。

例如,当你在手机上设置上午8:00的闹钟时——那个时间是“不确定的”——它与时区无关。如果你住在罗马,然后旅行到东京,你的闹钟将在东京的上午8:00响起,就像它在罗马的上午8:00响起一样。这是不可能用UTC来表示的。

你可以通过在value-format中不提供任何时区或偏移信息来使用日期选择器实现不确定时间——解释日期的人有责任添加那些信息。value-format中的标记总是输出本地客户端值——所以通过省略值中的任何时区或偏移(Z)数据,它本质上是“不确定的”:

加载实时示例

指定时区

对于某些应用程序来说,选择给定位置的时间是必要的——这可能相当具有挑战性。为了帮助缓解这种困难,日期选择器支持明确指定输入的 timezone

timezone 属性允许您根据浏览器支持的 IANA 时区 来指定日期选择器的“位置”。当您希望允许用户选择一个给定地理位置的日期和时间,无论客户端的位置如何时,这一点非常重要。一些示例用例包括:

  • 餐厅预订
  • 租车取车时间
  • 酒店入住时间

有很多情况下不应该使用 timezone(默认为客户端时间):

  • 安排 Zoom 会议
  • 设置提醒通知
  • 创建日历事件

在下面的示例中,用户需要在国际航班后在印度加尔各答取一辆租赁车。用户查看他们的机票——航班抵达加尔各答的时间为 下午 1:45。他们希望在 45 分钟后的 下午 2:30 提车。无论用户从世界上哪个地方预订旅行,这些事实都是真实的。在这种情况下,我们应该将时区设置为 亚洲/加尔各答。加尔各答的偏移量是 +5:30 —— 因此,在 加尔各答 选择 下午 2:30 相当于 上午 09:00 UTC:

加载实时示例
时区 Polyfill

大多数浏览器都内置了全面的 IANA 数据库,内置在 Intl.DateTimeFormat 中。这很好,因为 FormKit 不需要将(相当庞大的)时区数据库发送到客户端浏览器。然而,一些较旧的浏览器可能没有 IANA 数据库。可以通过使用 polyfill.io 并带有 Intl.DateTimeFormat.~timeZone.all 轻松地填充这些数据。

禁用日期

在日期选择器中禁用特定日期通常是必要的。在日期选择器中禁用日期有三种方式:

  • min-date - 一个属性,用于控制第一个可用日期是什么。
  • max-date - 一个属性,用于控制最后一个可用日期是什么。
  • disabled-dates - 一个属性,用于控制是否应该禁用任意日期。

任何被禁用的日期都不能在日期选择器的弹出窗口中被选择,然而,一个不可用的日期仍然可以被设置为初始值或通过输入到输入框中(当它不处于 picker-only 模式时)。为了处理这些边缘情况,日期选择器内置了一个验证规则(不能被禁用),以确保只有有效的日期可以被提交。验证规则的关键是 invalidDate

最小日期

通常需要禁用早于特定日期的日期。例如,预订酒店房间只应该选择未来的日期。要做到这一点,请使用 min-date 属性,并搭配 ISO8601 兼容字符串或原生 Date 对象:

加载实时示例

最大日期

要禁用在给定日期之后的所有日期,请使用 max-date 属性。例如,生日选择器应该只允许选择过去的日期。要做到这一点,请使用 max-date 属性,并搭配 ISO8601 兼容字符串或原生 Date 对象:

加载实时示例
同时使用最小和最大日期

你可以同时使用 min-datemax-date。这不仅会限制日期范围,而且当使用文本输入时,还会限制可用的年份只有有效的年份。

禁用的天数

我们的应用程序通常需要比 min-datemax-date 允许的更细粒度的控制来禁用日期。日期选择器通过利用 disabled-days 属性提供了细粒度的控制。

disabled-days 属性期望一个函数,该函数接收 2 个参数:核心节点和一个 Date 对象。该函数的责任是返回一个布尔值,指示日期是否被禁用(true 表示禁用)。

disabled-days 属性优先于 min-datemax-date —— 你可以选择通过访问 node.props.minDatenode.props.maxDate 来重新实现基础功能。

快速且同步

提供的函数必须是快速且同步的 —— 它会被频繁且重复地调用。例如,如果你需要从数据库中获取信息,请在此函数之外进行,并使用此函数来访问缓存的结果。

示例:禁用周末

加载实时示例

示例:从 API 获取

加载实时示例

扫描可用性

当通过键盘导航日历弹出窗口时,日期选择器不会允许你选择一个被禁用的日期。然而,这可能会令人恼火,因为如果一些可用日期被不可用的日期“夹在中间”,会造成无法访问的区域。

为了提供更好的用户体验,日期选择器会自动向前或向后扫描(取决于所需的方向),以寻找下一个可选的日期。控制扫描可用日期的最大天数由 maxScan 属性控制(默认为 7 天):

示例:max-scan

加载实时示例

可清除

当输入框有值时,可以通过点击出现的“清除”按钮来清除日期选择器输入框的内容 — 这个清除按钮只有在添加了 clearable 属性时才会出现:

加载实时示例

属性 & 参数

PropType默认描述
clearablestringfalse在值的右侧添加一个清除按钮。这个按钮只有在输入框有完成的值时才会出现。
date-formatstringD在日历中用于月份日期的令牌格式。
disabled-daysfunctionmin/max date logic一个传递核心节点和 `Date` 对象的函数,必须返回日期是否被禁用(`true` 表示禁用)。
formatstring/objectdate: 'long'在选择输入框中向用户显示的格式。
max-dateDate | ISO8601none用户允许选择的最大日期。
max-scannumber7在通过键盘导航寻找可用日期跳转时,向前或向后扫描的最大天数。
min-dateDate | ISO8601none用户允许选择的最早日期。
month-button-formatstringMMMM用于日历弹出窗口中月份面板按钮的日期格式令牌。
month-formatstringMMMM用于月份面板上每个月的日期格式令牌。
overlaybooleanfalse是否显示遮罩层。在遮罩输入文档中阅读更多关于遮罩层的信息(在 `pickerOnly` 模式下无效)。
picker-onlybooleanfalse是否允许通过文本输入输入日期。当启用了 picker-only 时,只能使用选择器来选择日期。
show-monthsnumber1在日面板上弹出窗口中渲染的月份数。
sequencearray['day']当用户打开日期选择器日历视图时,引导用户通过的面板序列。选项有 `year`, `month`, `day`, `time`。
value-formatstring/objectISO8601记录为输入值的格式。这可以与任何令牌格式、日期样式或 `ISO8601` 组合。
value-localestring`node.props.locale`用于 `valueFormat` 的区域设置。在 `valueFormat` 属性中使用格式令牌时,强烈建议设置一个明确的 `valueFormat`。
week-startnumber0开始 `day` 面板日历的一周中的哪一天。0-6,其中 0 = 星期日,6 = 星期六。
weekday-formatstringd用于渲染一周中每天列标题的日期格式令牌。
year-formatstringYYYY用于在 `year` 面板中渲染年份的日期格式令牌。
popoverbooleanfalse使用浏览器 Popover API 渲染输入的 UI 面板。
显示 通用 props
configObject{}提供给 input 的节点和此输入的任何后代节点的配置选项。
delayNumber20在调度 commit hook 前,输入值的去抖动毫秒数。
dirtyBehaviorstringtouched确定此输入的“dirty”标志设置方式。可以设置为 touchedcompare — 默认为 touched,性能更好,但无法检测表单是否再次匹配其初始状态。
errorsArray[]要在此字段上显示的错误消息的字符串数组。
helpString''帮助文本与输入关联的文本。
idStringinput_{n}输入的唯一标识符。提供一个 id 还可以全局访问输入的节点。
ignoreBooleanfalse防止将输入包含在任何父级(组、列表、表单等)中。在仅用于 UI 而不是实际值的情况下非常有用。
indexNumberundefined如果父级是列表,允许在给定索引处插入输入。如果输入的值未定义,它将继承该索引位置的值。如果它有一个值,它将在给定索引处将其插入到列表的值中。
labelString''与输入关联的 label 元素的文本。
nameStringinput_{n}输入的名称,在数据对象中唯一标识。在一组字段中应该是唯一的。
parentFormKitNodecontextual默认情况下,父级是包装组、列表或表单,但此属性允许显式分配父级节点。
prefix-iconString''指定放置在 prefixIcon 部分的 图标
preservebooleanfalse在输入卸载时,在父组、列表或表单上保留输入的值。
preserve-errorsbooleanfalse默认情况下,使用 setErrors 在输入上设置的错误会在输入时自动清除,将此属性设置为 true 可以保留错误,直到明确清除为止。
sections-schemaObject{}一个包含部分键和模式部分值的对象,其中每个模式部分应用于相应的部分。
suffix-iconString''指定放置在 suffixIcon 部分的 图标
typeStringtext要从库中渲染的输入类型。
validationString, Array[]要应用于输入的 验证 规则。
validation-visibilityStringblur确定何时显示输入的验证失败规则。有效值为 blurdirtylive
validation-labelString{label prop}确定在验证错误消息中使用的标签,默认情况下,如果可用,则使用 label 属性,否则使用 name 属性。
validation-rulesObject{}附加的自定义验证规则,可用于验证 prop。
valueAnyundefined为输入和/或其子元素提供初始值。不是响应式的。可以种子 整个组(表单)和列表。

部分

您可以使用该部分的“键”来定位输入的特定部分,允许您修改该部分的类、HTML(通过:sections-schema)或内容(通过插槽)。在这里阅读更多关于部分的信息。

View on a larger screen to see this section diagram.

选择日期
2014年11月26日
📅
选择您的到达日期。
抱歉,该日期不可用。

覆盖层

当添加了overlay属性时,此部分位于inner部分内部。

View on a larger screen to see this section diagram.

年份面板

当日期选择器弹出窗口打开时,面板出现在inner部分下方的输入元素下面。

View on a larger screen to see this section diagram.

2010 - 2020
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019

月份面板

当日期选择器弹出时,该面板出现在 inner 部分的输入元素下方。

View on a larger screen to see this section diagram.

2027
X
一月
二月
三月
四月
五月
六月
七月
八月
九月
十月
十一月
十二月

日面板

当日期选择器弹出时,该面板出现在 inner 部分的输入元素下方。

View on a larger screen to see this section diagram.

二月
2026
X
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

时间面板

当日期选择器弹出窗口打开时,面板会出现在 inner 部分的输入元素下方。

View on a larger screen to see this section diagram.

二月
17
2027
X
12:00 AM

部分关键词

Section-key描述
calendar日历面板上日历的直接包裹层。
calendarHeader日历面板上头部列的包裹层。
calendarWeeks日历面板上每一行周的直接包裹层。
day日子的内容 — 默认包含数字日期。在这个插槽/部分中,你可以使用 context.day(在schema中为 $day)来获取给定日子的日期对象。
dayButton时间面板头部的按钮,用于导航到日历面板。
dayCell日期部分的直接包裹层。在这个插槽/部分中,你可以使用 context.day(在schema中为 $day)来获取给定日子的日期对象。
daysHeader日期面板上头部列的包裹层。
month在月份面板上渲染实际月份名称的部分。在这个插槽/部分中,你可以使用 context.month(在schema中为 $month)来获取给定月份的日期对象。
monthButton日历和时间面板头部的按钮,用于导航到月份面板。
months月份面板上月份部分的直接包裹层。
monthsHeader月份面板上头部按钮(yearButton)的直接包裹层。
next在面板头部,负责导航到下一个月或十年的按钮。
nextLabel负责渲染面板头部下一个按钮文本内容的部分。
panelClose负责渲染日期选择器的关闭按钮的部分,显示在小型触摸设备上。
closeIcon在panelClose部分内渲染的图标。
openButton负责打开选择器对话框的按钮。
overlay覆盖层的外部包裹层。覆盖层用于模仿文本输入模式下文本输入框中的文本,以便进行样式设置。
overlayChar包含类型为char的覆盖字符的部分
overlayEnum包含类型为enum的覆盖字符的部分
overlayInner覆盖层部分内部的内包裹层。
overlayLiteral包含类型为literal的覆盖字符的部分
overlayParts包含所有覆盖部分作为直接子元素的部分。
overlayPlaceholder包含类型为placeholder的覆盖字符的部分。
panel围绕当前活动面板的包裹层。这是作为panelHeader的同级元素渲染的。
panelHeader围绕每个面板头部的包裹层,面板的导航按钮位于此处。这是panel部分的同级元素。
panelWrapper围绕面板和panelHeader部分的包裹层,该部分负责显示或隐藏选择器对话框。
prev在面板头部,负责导航到上一个月或十年的按钮。
prevLabel负责渲染面板头部上一个按钮文本内容的部分。
time包含timeInput的时间面板。
timeHeader时间面板的面板头部,带有导航按钮到年、月和日面板。
timeInput一个原生的HTML time 输入,负责设置所选日期的时间。
week围绕日历面板上一行7天的包裹层。
weekDay负责在日历面板的日历头部渲染星期几的单元格(M, T, W等...)。
weekDays围绕日历头部星期几的包裹元素。
year负责在年份面板上渲染可用年份的元素。
yearButton月份、日历和时间面板头部的按钮,用于导航到年份面板。
years年份面板,负责一次渲染十年的年份。
yearsHeader在年份面板上的面板头部,显示当前十年的年份范围。
显示 通用 section keys
outer最外层的包装元素。
wrapper标签和输入周围的包装器。
label输入的标签。
prefix默认情况下没有输出,但允许直接在输入元素之前放置内容。
prefixIcon输出在前缀部分之前放置一个图标的元素。
inner实际输入元素周围的包装器。
suffix默认情况下没有输出,但允许直接在输入元素之后放置内容。
suffixIcon输出在后缀部分之后放置一个图标的元素。
input输入元素本身。
help包含帮助文本的元素。
messages包装所有消息的容器。
message包含消息的元素(或多个元素) - 最常见的是验证和错误消息。

可访问性

所有 FormKit 输入都是考虑到以下可访问性因素而设计的。通过在此处提交可访问性问题,帮助我们不断改进所有人的可访问性:

语义标记Aria 属性可通过键盘访问焦点指示器与提供的主题的颜色对比可访问标签、帮助文本和错误
部分键属性默认描述
panelWrappertabindex-1 or 0通过设置为 -1(禁用时)和 0(启用时)来优先考虑键盘焦点顺序。
aria-modaltrue表明模态对话框出现,并且它阻止与页面上其他元素的交互。
aria-label提供一个可访问的名称。
weekDayaria-label提供一个可访问的名称。
dayCelltabindex-1 or 0通过设置为 0(当它是同一天时)和 -1(当它不是时)来优先考虑键盘焦点顺序。
aria-selected表明当前是否选中了该天。
aria-label提供一个可访问的名称。
openButtontabindex-1 or 0通过设置为 -1(当它处于仅选择器模式时)和 0(当它不是时)来优先考虑键盘焦点顺序。
aria-label提供一个可访问的名称。
aria-haspopuptrue表示此交互触发的是一个弹出菜单或对话框的存在。
aria-expanded表明颜色选择器元素当前是展开还是折叠状态。
aria-controls将此元素链接到列表框元素的 ID。
yeartabindex-1 or 0通过设置为 0(当它是同一年时)和 -1(当它不是时)来优先考虑键盘焦点顺序。
aria-selected表明当前是否选中了该年。
monthtabindex-1 or 0通过设置为 0(当它是同一月时)和 -1(当它不是时)来优先考虑键盘焦点顺序。
aria-selected表明当前是否选中了该月。
panelHeaderaria-livepolite向屏幕阅读器宣布,这个元素已经动态更新,而不会中断当前任务。
dayButtontabindex2通过设置为 2 来优先考虑键盘焦点顺序。
removeSelectionaria-controls将此元素链接到输入元素的 ID。
panelClosetabindex-1通过设置为 -1 来优先考虑键盘焦点顺序。
aria-label提供一个可访问的名称。
显示 通用 部分键
labellabelfor将其与输入元素关联,提高可访问性和用户体验
inputinputdisabled禁用 HTML 元素,阻止用户交互并指示非交互状态
aria-describedby通过将元素与描述关联,增强可访问性,帮助屏幕阅读器
aria-required当需要验证时,添加所需的状态
iconiconfor每当将图标定义为标签时,将其与输入元素关联,增强可访问性和用户体验

键盘交互

键盘事件描述
Tab将焦点移动到页面上的下一个可聚焦输入。
Shift + Tab将焦点移动到页面上的上一个可聚焦输入。