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
datepicker
输入允许用户从可定制的日历中选择日期,并且可以直接在输入框中输入日期,完全支持国际化。
FormKit 使用独特的掩码解决方案,允许用户通过键入日期到日期选择器输入框(同时限制可用选项仅为有效值)或通过日历输入选择他们的日期。
要在双重输入模式下显示占位符,你必须启用掩码 overlay
。在 picker-only
模式启用时,这不是必需的。了解更多关于掩码和覆盖层的信息。
你可以禁用文本输入机制,并确保某人使用日期选择器对话框来输入他们的日期,通过添加 picker-only
属性。在 picker-only
模式下,点击输入框将立即打开对话框。此外,使用 overlay
对于占位符支持并不是必需的:
日期选择器支持 Intl.DateTimeFormat
的“样式化日期”,以及基于令牌的日期格式。要更改显示给用户的格式,请修改 format
属性。
如果您的受众是国际性的,您应该考虑坚持使用“样式化日期”,因为它们是每个地区最自然的日期格式。日期选择器的默认格式是 long
。
format
属性可以接受像 long
或 medium
这样的简单字符串,在这种情况下,它使用相应的 Intl.DateTimeFormat
dateStyle
。或者,您可以提供一个具有 date
和 time
属性及其各自的 Intl.DateTimeFormat
样式的对象({ date: 'long', time: 'short' }
)。
使用 format
属性启用以下任何日期样式:
格式样式 | 示例 |
---|---|
full | Wednesday, March 1, 2023 , Mercoledì 1 marzo 2023 |
long | March 1, 2023 , 1 marzo 2023 |
medium | Mar 6, 2023 , 6 mar 2023 |
short | 3/1/23 , 1/3/23 |
格式样式 | 示例 |
---|---|
long | 7:05:00 PM , 19:05:00 |
medium | 7:05:00 PM , 19:05:00 |
short | 7:05 PM , 19:05 |
您可以使用 format
属性来明确设置一个令牌化的日期格式。令牌格式由一个字符串表示,其中包含任意字符和下表中的一个或多个字符串。
FormKit 与 Intl.DateTimeFormat
接口,根据当前的 locale
自动国际化令牌。例如,对于 2000-01-01
,令牌 MMMM
将为 en
地区产生 January
,但为 zh
地区产生 一月
。
使用令牌时,可能会创建无法解析的日期。例如,如果您的输入只显示星期几(dddd
)。您只能在 picker-only
模式下使用不可解析的日期格式。如果您希望用户能够输入他们的日期,您的格式必须至少包括一个月、日和年的令牌。
令牌 | 示例 | 描述 |
---|---|---|
YY | 99 , 23 , 00 | 2位数年份 |
YYYY | 1999 , 2023 , 2100 | 4位数年份 |
M | 1 , 12 | 月份 1-12 |
MM | 01 , 12 | 月份 01-12 |
MMM | Jan , Feb | 简称 1月-12月 |
MMMM | January , February | 全称 1月 - 12月 |
D | 1 , 9 , 22 | 月份中的日 1-31 |
DD | 01 , 09 , 22 | 月份中的日 01-31 |
d | M , T , W , T , F , S , S | 单位数日 "T" |
ddd | Thu , Sat | 简称星期 "Thu" |
dddd | Monday , Tuesday | 全称星期 "Wednesday" |
H | 0 , 13 , 23 | 最小小时位数,24小时制,0-23 |
HH | 00 , 13 , 23 | 2小时位数,24小时制,00-23 |
h | 12 , 1 , 11 | 最小小时位数,12小时制,1-12 |
hh | 12 , 01 , 11 | 2小时位数,12小时制,01-12 |
m | 1 , 59 | 分钟 0-59 |
mm | 01 , 59 | 分钟 00-59 |
s | 1 , 59 | 秒 0-59 |
ss | 01 , 59 | 秒 00-59 |
a | am , pm | 上午/下午 |
A | AM , PM | 上午/下午 |
尽管 FormKit 会自动国际化您的令牌 — 如果您的表单面向广泛的国际受众,请考虑使用日期样式而不是令牌,因为这会在许多地区导致更易读的日期。
要在格式中包含本身就是标记的字母(如 a
),您可以在该字符前加上反斜杠 \
来转义这些标记:
日期选择器的日历弹出窗口有四个“面板”:
day
— 显示一个传统的日历视图,可以选择一个月中的每一天。month
— 显示一年中的12个月份。year
— 一次显示十年的年份。time
— 显示一天中的时间。当用户打开日期选择器的弹出窗口时,他们将看到一个或多个这些面板。您可以通过提供 sequence
属性来修改显示给用户的面板以及这些面板应该显示的顺序。默认的 sequence
值是 ['day']
(这允许您导航到 month
和 year
面板)。
例如,在选择生日时,自然是先选择出生年份,然后是月份,然后是日期。sequence
属性允许这种行为:
time
面板可以用来允许用户选择一天中的特定时间。如果您选择了包含时间的 format
(如 YYYY-MM-DD HH:mm
),您可能会希望将 time
面板包含在您的顺序中:
与所有输入一样,日期选择器的 value
既是日期选择器产生的内容,也是读回到日期选择器中进行填充的内容。默认情况下,值的格式是一个 UTC 标准化的 ISO8601 字符串(例如:2014-11-27T03:59:00.000Z
)。然而,这种格式可以通过使用 value-format
属性更改为任何受支持的日期样式或上面列出的标记格式。
一个合理的问题是,为什么不总是使用 ISO8601
?尽管它是处理日期的最流行方式 — 它对机器和人都可读 — 但它并不是非常适合人类阅读。例如,如果您的表单向餐饮业务发送联系请求电子邮件,那么 ISO8601
可能不是最佳选择。
值格式必须包含重新构建日期对象所需的所有必要数据,至少包括月份、日期、年份。如果您的输入请求用户提供的信息在您的值格式中没有表示,那么这些细节将会丢失。
要将日期样式作为值使用,只需将您想要使用的样式传递给 value-format
属性:
值也可以通过使用格式化令牌以任意格式表示:
传递给日期选择器的值必须:
value-locale
中的 value-format
相匹配,或者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 的当前时间:
当在日期选择器中使用 value-format
令牌时,这些令牌将使用客户端的时区操作。例如,如果您的格式请求 HH
令牌,它将返回:
将其与上面的日期进行比较,您会看到它与本地时间的 小时
部分相同。为什么这很重要?请继续阅读。
让我们考虑一个位于阿姆斯特丹(UTC +100/+200
)的餐厅预订应用。它是游客的热门目的地,他们通常会在出行前几周进行预订(当时他们还在自己的国家)。
日期选择器默认情况下会要求游客选择他们希望预订的日期和时间——但(默认情况下)选择的将是他们的本地时间,而不是阿姆斯特丹的时间。即使value-format
输出的是UTC,时间也不会是阿姆斯特丹的预定时间(除非他们恰好在同一时区)。
一般来说,有两种解决这个问题的方案:
使用一个“不确定”的时间(有时被称为“墙上时间”)。不确定时间是没有与底层Unix时间戳明确关联的时间。例如,3月13日下午2点
不是UTC,也没有明确的偏移量。3月13日下午2点
描述了一个特定时间在不确定的位置/时区。只要你不在值中使用偏移量(Z
),你可以使用格式标记(YYYY-MM-DD HH:mm
)来实现这一点。
这对我们的餐厅应用程序来说是可行的,只要后端能够将适当的时区或偏移量附加到这个不确定时间2023-03-13 14:00 GMT+0100
,以得到适当的UTC时间(这个虚构的应用程序在其数据库中所需的)。对于后端开发人员来说,剩下的挑战是知道应用于日期的偏移量,以确保它变成“阿姆斯特丹时间”(由于Europe/Amsterdam
的夏令时,这个偏移量会根据一年中的时间而变化)。
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
(默认为客户端时间):
在下面的示例中,用户需要在国际航班后在印度加尔各答取一辆租赁车。用户查看他们的机票——航班抵达加尔各答的时间为 下午 1:45
。他们希望在 45 分钟后的 下午 2:30
提车。无论用户从世界上哪个地方预订旅行,这些事实都是真实的。在这种情况下,我们应该将时区设置为 亚洲/加尔各答
。加尔各答的偏移量是 +5:30
—— 因此,在 加尔各答
选择 下午 2:30
相当于 上午 09:00
UTC:
大多数浏览器都内置了全面的 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-date
和 max-date
。这不仅会限制日期范围,而且当使用文本输入时,还会限制可用的年份只有有效的年份。
我们的应用程序通常需要比 min-date
和 max-date
允许的更细粒度的控制来禁用日期。日期选择器通过利用 disabled-days
属性提供了细粒度的控制。
disabled-days
属性期望一个函数,该函数接收 2 个参数:核心节点和一个 Date
对象。该函数的责任是返回一个布尔值,指示日期是否被禁用(true
表示禁用)。
disabled-days
属性优先于 min-date
和 max-date
—— 你可以选择通过访问 node.props.minDate
或 node.props.maxDate
来重新实现基础功能。
提供的函数必须是快速且同步的 —— 它会被频繁且重复地调用。例如,如果你需要从数据库中获取信息,请在此函数之外进行,并使用此函数来访问缓存的结果。
当通过键盘导航日历弹出窗口时,日期选择器不会允许你选择一个被禁用的日期。然而,这可能会令人恼火,因为如果一些可用日期被不可用的日期“夹在中间”,会造成无法访问的区域。
为了提供更好的用户体验,日期选择器会自动向前或向后扫描(取决于所需的方向),以寻找下一个可选的日期。控制扫描可用日期的最大天数由 maxScan
属性控制(默认为 7 天):
当输入框有值时,可以通过点击出现的“清除”按钮来清除日期选择器输入框的内容 — 这个清除按钮只有在添加了 clearable
属性时才会出现:
Prop | Type | 默认 | 描述 |
---|---|---|---|
clearable | string | false | 在值的右侧添加一个清除按钮。这个按钮只有在输入框有完成的值时才会出现。 |
date-format | string | D | 在日历中用于月份日期的令牌格式。 |
disabled-days | function | min/max date logic | 一个传递核心节点和 `Date` 对象的函数,必须返回日期是否被禁用(`true` 表示禁用)。 |
format | string/object | date: 'long' | 在选择输入框中向用户显示的格式。 |
max-date | Date | ISO8601 | none | 用户允许选择的最大日期。 |
max-scan | number | 7 | 在通过键盘导航寻找可用日期跳转时,向前或向后扫描的最大天数。 |
min-date | Date | ISO8601 | none | 用户允许选择的最早日期。 |
month-button-format | string | MMMM | 用于日历弹出窗口中月份面板按钮的日期格式令牌。 |
month-format | string | MMMM | 用于月份面板上每个月的日期格式令牌。 |
overlay | boolean | false | 是否显示遮罩层。在遮罩输入文档中阅读更多关于遮罩层的信息(在 `pickerOnly` 模式下无效)。 |
picker-only | boolean | false | 是否允许通过文本输入输入日期。当启用了 picker-only 时,只能使用选择器来选择日期。 |
show-months | number | 1 | 在日面板上弹出窗口中渲染的月份数。 |
sequence | array | ['day'] | 当用户打开日期选择器日历视图时,引导用户通过的面板序列。选项有 `year`, `month`, `day`, `time`。 |
value-format | string/object | ISO8601 | 记录为输入值的格式。这可以与任何令牌格式、日期样式或 `ISO8601` 组合。 |
value-locale | string | `node.props.locale` | 用于 `valueFormat` 的区域设置。在 `valueFormat` 属性中使用格式令牌时,强烈建议设置一个明确的 `valueFormat`。 |
week-start | number | 0 | 开始 `day` 面板日历的一周中的哪一天。0-6,其中 0 = 星期日,6 = 星期六。 |
weekday-format | string | d | 用于渲染一周中每天列标题的日期格式令牌。 |
year-format | string | YYYY | 用于在 `year` 面板中渲染年份的日期格式令牌。 |
popover | boolean | false | 使用浏览器 Popover API 渲染输入的 UI 面板。 |
显示 通用 props | |||
config | Object | {} | 提供给 input 的节点和此输入的任何后代节点的配置选项。 |
delay | Number | 20 | 在调度 commit hook 前,输入值的去抖动毫秒数。 |
dirtyBehavior | string | touched | 确定此输入的“dirty”标志设置方式。可以设置为 touched 或 compare — 默认为 touched ,性能更好,但无法检测表单是否再次匹配其初始状态。 |
errors | Array | [] | 要在此字段上显示的错误消息的字符串数组。 |
help | String | '' | 帮助文本与输入关联的文本。 |
id | String | input_{n} | 输入的唯一标识符。提供一个 id 还可以全局访问输入的节点。 |
ignore | Boolean | false | 防止将输入包含在任何父级(组、列表、表单等)中。在仅用于 UI 而不是实际值的情况下非常有用。 |
index | Number | undefined | 如果父级是列表,允许在给定索引处插入输入。如果输入的值未定义,它将继承该索引位置的值。如果它有一个值,它将在给定索引处将其插入到列表的值中。 |
label | String | '' | 与输入关联的 label 元素的文本。 |
name | String | input_{n} | 输入的名称,在数据对象中唯一标识。在一组字段中应该是唯一的。 |
parent | FormKitNode | contextual | 默认情况下,父级是包装组、列表或表单,但此属性允许显式分配父级节点。 |
prefix-icon | String | '' | 指定放置在 prefixIcon 部分的 图标。 |
preserve | boolean | false | 在输入卸载时,在父组、列表或表单上保留输入的值。 |
preserve-errors | boolean | false | 默认情况下,使用 setErrors 在输入上设置的错误会在输入时自动清除,将此属性设置为 true 可以保留错误,直到明确清除为止。 |
sections-schema | Object | {} | 一个包含部分键和模式部分值的对象,其中每个模式部分应用于相应的部分。 |
suffix-icon | String | '' | 指定放置在 suffixIcon 部分的 图标。 |
type | String | text | 要从库中渲染的输入类型。 |
validation | String, Array | [] | 要应用于输入的 验证 规则。 |
validation-visibility | String | blur | 确定何时显示输入的验证失败规则。有效值为 blur 、dirty 和 live 。 |
validation-label | String | {label prop} | 确定在验证错误消息中使用的标签,默认情况下,如果可用,则使用 label 属性,否则使用 name 属性。 |
validation-rules | Object | {} | 附加的自定义验证规则,可用于验证 prop。 |
value | Any | undefined | 为输入和/或其子元素提供初始值。不是响应式的。可以种子 整个组(表单)和列表。 |
您可以使用该部分的“键”来定位输入的特定部分,允许您修改该部分的类、HTML(通过:sections-schema
)或内容(通过插槽)。在这里阅读更多关于部分的信息。
当添加了overlay
属性时,此部分位于inner
部分内部。
当日期选择器弹出窗口打开时,面板出现在inner
部分下方的输入元素下面。
当日期选择器弹出时,该面板出现在 inner
部分的输入元素下方。
当日期选择器弹出时,该面板出现在 inner
部分的输入元素下方。
当日期选择器弹出窗口打开时,面板会出现在 inner
部分的输入元素下方。
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 输入都是考虑到以下可访问性因素而设计的。通过在此处提交可访问性问题,帮助我们不断改进所有人的可访问性:
部分键 | 属性 | 默认 | 描述 |
---|---|---|---|
panelWrapper | tabindex | -1 or 0 | 通过设置为 -1(禁用时)和 0(启用时)来优先考虑键盘焦点顺序。 |
aria-modal | true | 表明模态对话框出现,并且它阻止与页面上其他元素的交互。 | |
aria-label | 提供一个可访问的名称。 | ||
weekDay | aria-label | 提供一个可访问的名称。 | |
dayCell | tabindex | -1 or 0 | 通过设置为 0(当它是同一天时)和 -1(当它不是时)来优先考虑键盘焦点顺序。 |
aria-selected | 表明当前是否选中了该天。 | ||
aria-label | 提供一个可访问的名称。 | ||
openButton | tabindex | -1 or 0 | 通过设置为 -1(当它处于仅选择器模式时)和 0(当它不是时)来优先考虑键盘焦点顺序。 |
aria-label | 提供一个可访问的名称。 | ||
aria-haspopup | true | 表示此交互触发的是一个弹出菜单或对话框的存在。 | |
aria-expanded | 表明颜色选择器元素当前是展开还是折叠状态。 | ||
aria-controls | 将此元素链接到列表框元素的 ID。 | ||
year | tabindex | -1 or 0 | 通过设置为 0(当它是同一年时)和 -1(当它不是时)来优先考虑键盘焦点顺序。 |
aria-selected | 表明当前是否选中了该年。 | ||
month | tabindex | -1 or 0 | 通过设置为 0(当它是同一月时)和 -1(当它不是时)来优先考虑键盘焦点顺序。 |
aria-selected | 表明当前是否选中了该月。 | ||
panelHeader | aria-live | polite | 向屏幕阅读器宣布,这个元素已经动态更新,而不会中断当前任务。 |
dayButton | tabindex | 2 | 通过设置为 2 来优先考虑键盘焦点顺序。 |
removeSelection | aria-controls | 将此元素链接到输入元素的 ID。 | |
panelClose | tabindex | -1 | 通过设置为 -1 来优先考虑键盘焦点顺序。 |
aria-label | 提供一个可访问的名称。 | ||
显示 通用 部分键 | |||
label | label | for | 将其与输入元素关联,提高可访问性和用户体验 |
input | input | disabled | 禁用 HTML 元素,阻止用户交互并指示非交互状态 |
aria-describedby | 通过将元素与描述关联,增强可访问性,帮助屏幕阅读器 | ||
aria-required | 当需要验证时,添加所需的状态 | ||
icon | icon | for | 每当将图标定义为标签时,将其与输入元素关联,增强可访问性和用户体验 |
键盘事件 | 描述 |
---|---|
Tab | 将焦点移动到页面上的下一个可聚焦输入。 |
Shift + Tab | 将焦点移动到页面上的上一个可聚焦输入。 |