概述
<b-time> 符合 WAI-ARIA 无障碍性，针对键盘控制（箭头、向上/向下翻页、主页和结束键）进行了优化。还支持国际化，如果未指定语言环境，则默认为浏览器的语言环境或页面的语言环境。
如果您需要一个时间选择器作为自定义表单控件输入，请使用 <b-form-timepicker> 组件。
<template>
<b-row>
<b-col md="auto">
<b-time v-model="value" locale="en" @context="onContext"></b-time>
</b-col>
<b-col>
<p>Value: <b>'{{ value }}'</b></p>
<p class="mb-0">Context:</p>
<pre class="small">{{ context }}</pre>
</b-col>
</b-row>
</template>
<script>
export default {
data() {
return {
value: '',
context: null
}
},
methods: {
onContext(ctx) {
this.context = ctx
}
}
}
</script>
v-model 返回值
<b-time> 始终以 HH:mm:ss 格式返回一个字符串，这与原生浏览器 <input type="time"> 控件返回的格式相同。该值将介于 '00:00:00' 到 '23:59:59' 之间（24 小时制，使用 'h23' 小时循环语法）
如果未选择时间，则 <b-time> 返回一个空字符串 ('')。
禁用和只读状态
设置 disabled 属性将移除 <b-time> 组件的所有交互性。设置 readonly 属性将禁用时间选择，但会保持旋转按钮可聚焦。
<template>
<div>
<b-form-group
label="Select time interactive state"
v-slot="{ ariaDescribedby }"
>
<b-form-radio-group
v-model="state"
:aria-describedby="ariaDescribedby"
aria-controls="ex-disabled-readonly"
>
<b-form-radio value="disabled">Disabled</b-form-radio>
<b-form-radio value="readonly">Readonly</b-form-radio>
<b-form-radio value="normal">Normal</b-form-radio>
</b-form-radio-group>
</b-form-group>
<b-time
id="ex-disabled-readonly"
:disabled="disabled"
:readonly="readonly"
></b-time>
</div>
</template>
<script>
export default {
data() {
return {
state: 'disabled'
}
},
computed: {
disabled() {
return this.state === 'disabled'
},
readonly() {
return this.state === 'readonly'
}
}
}
</script>
样式
默认情况下，不显示秒数旋转按钮。要启用秒数部分，请将 show-seconds 属性设置为 true 以启用秒数选择旋转按钮。当 show-seconds 为 false（或未提供）时，返回的值始终将时间字符串的秒数部分设置为 00。
<template>
<b-time v-model="value" show-seconds locale="en"></b-time>
<div class="mt-2">Value: '{{ value }}'</div>
</template>
<script>
export default {
data() {
return {
value: ''
}
}
}
</script>
默认情况下，当前选定的时间将显示在时间组件的顶部，并以区域语言格式化。
您可以通过 hide-header 属性隐藏此标题。请注意，这仅会从视觉上隐藏选定的时间，而不会将其隐藏于屏幕阅读器用户，因为后者会将其作为 aria-live 区域。
边框和内边距
想使用带内边距的边框时间控件？使用 Bootstrap 的边框和内边距实用程序类添加边框和内边距
<template>
<b-time class="border rounded p-2" locale="en"></b-time>
</template>
默认插槽
通过使用 default 插槽在时间界面的底部提供可选内容。该插槽可用于添加按钮，如“现在”或“重置”等。
<template>
<b-time v-model="value" show-seconds locale="en">
<div class="d-flex" dir="ltr">
<b-button
size="sm"
variant="outline-danger"
v-if="value"
@click="clearTime"
>
Clear time
</b-button>
<b-button
size="sm"
variant="outline-primary"
class="ml-auto"
@click="setNow"
>
Set Now
</b-button>
</div>
</b-time>
</template>
<script>
export default {
data() {
return {
value: null
}
},
methods: {
setNow() {
const now = new Date()
this.value = now.toTimeString().slice(0, 8)
},
clearTime() {
this.value = ''
}
}
}
</script>
事件
更新 v-model 时会触发 'input' 事件。该事件有一个参数，即以字符串形式表示的所选时间。该值是 'HH:mm:ss' 格式的字符串（如果未选择时间，则为空字符串）。有效值范围为 '00:00:00' 到 23:59:59'。
如果未设置 show-seconds 属性，则时间值的秒部分将始终为 '00'。
如果设置了 disabled 或 readonly 属性，则将不会触发 'input' 事件。
context 事件
每当用户选择时间或用户更改其中一个微调按钮的值时，都会触发 'context' 事件。组件创建时（在插入到 DOM 之前）或已解析的语言环境发生更改时，也会触发此事件。
如果设置了 disabled 或 readonly 属性，则不会触发该事件（时间组件创建时的初始触发除外）。
'context' 事件将一个上下文对象作为其唯一参数传递，该对象具有以下属性
| 属性 | 说明 |
值 | 当前值作为 HH:mm:ss 字符串或空字符串 ''（如果未选择时间） |
格式化 | 当前值按已解析的语言环境格式化，或 label-no-time 属性值（如果未选择时间） |
小时 | 当前选择的小时（始终为 24 小时，h23' 格式）作为数字或 null（如果未选择小时） |
分钟 | 当前选择的分钟值作为数字或 null（如果未选择分钟） |
秒 | 当前选择的秒值作为数字或 null（如果未选择秒） |
语言环境 | 时间选择器解析的语言环境，这可能与请求的语言环境不同 |
isRTL | 如果语言环境为 RTL（从右到左），则为 true |
hour12 | 布尔值，指示界面是否使用 12 小时制 |
hourCycle | 表示用于自旋按钮的小时循环类型的字符串：'h11'、'h12'、'h23' 或 'h24' |
有关上下文属性 locale、hour12 和 hourCycle 的信息，请参阅 国际化部分。
国际化
时间界面的国际化通过 Intl.DateTimeFormat 和 Intl.NumberFormat 提供，但时间控件元素（aria 标签、已选择状态等）应用的标签除外。您必须为这些标签提供自己的翻译。可用的语言环境取决于浏览器（并非所有浏览器都支持所有语言环境）。
默认情况下，<b-time> 将使用浏览器的默认语言环境，但你可以通过 locale 属性指定要使用的语言环境（或语言环境）。该属性接受单个语言环境字符串或语言环境字符串数组（按从最优先语言环境到最不优先语言环境的顺序排列）。
发出的 'context' 事件将包括时间控件已解析为哪个语言环境（可能与请求的语言环境不同，具体取决于 Intl 的支持语言环境）。
在使用 Node.js 进行服务器端渲染 (SSR) 时，请确保你使用的 Node.js 运行时支持 Intl 和你将使用的语言环境。有关详细信息，请参阅 Node Intl 支持文档。
<template>
<b-row>
<b-col cols="12" class="mb-3">
<label for="example-locales">Locale:</label>
<b-form-select id="example-locales" v-model="locale" :options="locales"></b-form-select>
</b-col>
<b-col md="auto">
<b-time
v-model="value"
v-bind="labels[locale] || {}"
:locale="locale"
show-seconds
@context="onContext"
></b-time>
</b-col>
<b-col>
<p>Value: <b>'{{ value }}'</b></p>
<p class="mb-0">Context:</p>
<pre class="small">{{ context }}</pre>
</b-col>
</b-row>
</template>
<script>
export default {
data() {
return {
value: '',
context: null,
locale: 'en-US',
locales: [
{ value: 'en-US', text: 'English US (en-US)' },
{ value: 'de', text: 'German (de)' },
{ value: 'ar-EG', text: 'Arabic Egyptian (ar-EG)' },
{ value: 'zh', text: 'Chinese (zh)' }
],
labels: {
de: {
labelHours: 'Stunden',
labelMinutes: 'Minuten',
labelSeconds: 'Sekunden',
labelIncrement: 'Erhöhen',
labelDecrement: 'Verringern',
labelSelected: 'Ausgewählte Zeit',
labelNoTimeSelected: 'Keine Zeit ausgewählt'
},
'ar-EG': {
labelHours: 'ساعات',
labelMinutes: 'الدقائق',
labelSeconds: 'ثواني',
labelAmpm: 'صباحا مساء',
labelAm: 'ص',
labelPm: 'م',
labelIncrement: 'زيادة',
labelDecrement: 'إنقاص',
labelSelected: 'الوقت المحدد',
labelNoTimeSelected: 'لا وقت المختار'
},
zh: {
labelHours: '小时',
labelMinutes: '分钟',
labelSeconds: '秒',
labelAmpm: '上午下午',
labelAm: '上午',
labelPm: '下午',
labelIncrement: '增量',
labelDecrement: '减量',
labelSelected: '选定时间',
labelNoTimeSelected: '没有选择时间'
}
}
}
},
methods: {
onContext(ctx) {
this.context = ctx
}
}
}
</script>
了解 hourCycle
全世界有 2 种主要的时间保持惯例（时钟）：12 小时制和 24 小时制。 hourCycle 属性允许你访问特定语言环境使用的时钟类型。小时周期类型可以有几个不同的值，这些值列在下表中。 hourCycle 信号如何将时间 '00:00:00'（一天的开始）呈现/格式化为特定语言环境的用户。 'context' 事件 包括已解析的 hourCycle 值。
hourCycle | 说明 |
'h12' | 使用 1–12 的小时系统。12 小时制，午夜从上午 12:00 开始 |
'h23' | 使用 0–23 的小时系统。24 小时制，午夜从 0:00 开始 |
'h11' | 使用 0–11 的小时系统。12 小时制，午夜从上午 0:00 开始 |
'h24' | 使用 1–24 的小时系统。24 小时制，午夜从 24:00 开始 |
原生 HTML5 <input type="date"> 以 'h23' 格式返回时间值，<b-time> 也以 'h23' 格式返回 v-model。此值可能与通过 <b-time> 组件的 GUI（旋转按钮）呈现给用户的值不同，具体取决于 选择的语言环境。
注意： IE 11 不支持解析语言环境的 hourCycle 值，因此我们根据解析的 hour12 值假设 h12 或 h23。
强制使用 12 或 24 小时界面
12 小时与 24 小时输入由客户端浏览器的默认语言环境（或从 locale 属性解析的语言环境）确定。要强制使用 12 小时用户界面，请将属性 hour12 设置为 true。要强制使用 24 小时用户界面，请将属性 hour12 设置为 false。属性 hour12 的默认值为 null，它使用解析的语言环境来确定使用哪个界面。
设置 hour12 属性将影响解析哪个 hourCycle 来设置小时旋转按钮的格式。请注意，虽然这可能会影响小时旋转按钮的格式，但格式化后的时间字符串结果可能会显示 'h12 或 'h23' 格式，这是因为客户端 Intl.DateTimeFormat 对特定语言环境的支持存在限制。因此，建议将 hour12 属性设置为 null（默认值），以便显示语言环境默认时间/小时格式。
无障碍
<b-time> 提供许多无障碍功能，例如 aria-live 区域、角色、aria 标签、快捷键和全键盘导航，可与大多数屏幕阅读器配合使用。
键盘导航
- 向上箭头 增加当前选定的旋转按钮值
- 向下箭头 减小当前选定的自旋按钮值
- 主页 将选定的自旋按钮设置为最小值
- 结束 将选定的自旋按钮设置为最大值
- 向上翻页 以较大的值增加选定的自旋按钮值，增加自旋按钮的步长
- 向下翻页 以较大的值减小选定的自旋按钮值，减小自旋按钮的步长
- 向右箭头 将焦点移动到组件中的下一个自旋按钮
- 向左箭头 将焦点移动到组件中的上一个自旋按钮
屏幕上看不到几个 label-* 道具，但用于为屏幕阅读器用户标记日历中的各种元素。例如，label-selected 道具被添加到显示所选值的元素中。
在对日期选择器进行国际化时，重要的是还要使用适当的翻译字符串更新 label-* 道具，以便国际屏幕阅读器用户听到正确的提示和描述。
实施说明
<b-time> 组件基于自定义 BootstrapVue 组件 <b-form-spinbutton>。
<b-time> 使用 Bootstrap 的边框和 flex 实用程序类，以及按钮 (btn-*) 类和 form-control 类。BootstrapVue 的自定义 SCSS/CSS 也需要进行适当的样式设置。
另请参阅