概述
<b-time> 符合 WAI-ARIA 無障礙規定，最佳化鍵盤控制（箭頭鍵、PgUp/PgDn、Home、End 鍵）。也支援國際化作業，並預設為瀏覽器或頁面的語言，如果未指定語言（語言清單）。
如果您需要時間選擇器作為自訂表單控制輸入，請使用 <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>
事件
'input' 事件會在更新 v-model 時觸發。此事件只有一個參數，為所選時間的字串。此值採用 'HH:mm:ss' 格式的字串（若未選取時間，則為空白字串）。有效值範圍為 '00:00:00' 至 23:59:59'。
若未設定 show-seconds prop，時間值的秒數部分將始終為 '00'。
若已設定 disabled 或 readonly prop，'input' 事件將不會觸發。
context 事件
'context' 事件會在使用者選擇時間或變更旋鈕之一的值時觸發。也會在元件建立時（插入 DOM 前）或解析的語言環境變更時觸發。
若已設定 disabled 或 readonly prop，則不會觸發事件（時間元件建立時最初觸發事件時除外）。
'context' 事件傳遞的 context 物件作為其唯一的參數，具有以下屬性
| 屬性 | 說明 |
value | 當前值，採用 HH:mm:ss 字串或空白字串 ''（若未選取時間） |
formatted | 以解析的語言環境格式化的當前值，或在未選取時間的情況下採用 label-no-time prop 值 |
hours | 目前選取的小時（始終為 24 小時，h23' 格式），採用數字或 null（若未選取小時） |
minutes | 目前選取的分鐘值，採用數字或 null（若未選取分鐘） |
seconds | 目前選取的秒數值，採用數字或 null（若未選取秒數） |
locale | 時間選取器解析的語言環境，此語言環境可能與要求的語言環境不同 |
isRTL | 如果語言環境為 RTL（由右至左）表示為 true |
hour12 | 布林值，表示介面是否使用 12 小時制 |
hourCycle | 代表旋鈕所使用小時制類型的字串：'h11'、'h12'、'h23' 或 'h24' |
有關內容屬性 locale、hour12 和 hourCycle 的資訊，請參閱 國際化部分。
國際化
時間介面的國際化透過 Intl.DateTimeFormat 和 Intl.NumberFormat 提供，時間控制元件的元素套用標籤 (aria 標籤、已選取狀態等) 除外。您必須提供這些標籤的翻譯。可用語言會取決於瀏覽器 (並非所有瀏覽器都支援所有語言)。
預設情況下，<b-time> 會使用瀏覽器的預設語言，但您可以透過 locale prop 指定要使用的語言 (或語言)，prop 接受單一語言字串，或陣列的語言字串 (以從最優先語言到最不優先語言順序排列)。
發出的 '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 am 開始。 |
'h23' | 使用 0–23 的小時系統。24 小時時鐘，從午夜 12:00 開始。 |
'h11' | 使用 0 到 11 時制。12 小時時鐘，午夜從凌晨 0:00 開始 |
'h24' | 使用 1 到 24 時制。24 小時時鐘，午夜從晚上 24:00 開始 |
原生 HTML5 <input type="date"> 會傳回 'h23' 格式時間值，而 <b-time> 也會以 'h23' 格式傳回 v-model。此值可能與使用者藉由 GUI（旋鈕）看到 <b-time> 元件呈現的值有所不同，視 已選取的區域設定 而定。
注意：IE 11 不支援 解析區域設定的 hourCycle 值，因此我們會根據已解析的 hour12 值假設為 h12 或 h23。
強制使用 12 小時或 24 小時介面
12 小時和 24 小時輸入取決於用戶端瀏覽器的預設區域設定（或從 locale 屬性解析的區域設定）。若要強制使用 12 小時使用者介面，請將 hour12 屬性設為 true。若要強制使用 24 小時使用者介面，請將 hour12 屬性設為 false。 hour12 屬性的預設值為 null，會使用已解析的區域設定來決定要使用哪種介面。
hour12 屬性的設定會影響針對小時旋鈕格式化時解析的 hourCycle 為何。請注意，這可能會影響小時旋鈕的格式，但格式化時間字串結果可能會因為客戶端 Intl.DateTimeFormat 對特定區域設定支援的限制而顯示 'h12 或 'h23' 格式。因此建議讓 hour12 屬性設為 null（預設值），以便顯示區域設定預設時間/小時格式。
輔助功能
<b-time> 提供許多輔助功能，例如 aria-live 區域、角色、aria 標籤、快速鍵以及完整的鍵盤導覽，可用於配合使用大多數螢幕閱讀器。
鍵盤導覽
- 向上箭頭 增加目前選取旋鈕值
- 向下箭頭 減少目前選取旋鈕值
- Home 將選取旋鈕設為最小值
- End 將選定下拉按鈕設定為最高值
- PageUp 將已選下拉按鈕的值增加大一格下拉按鈕的階梯
- PageDown 將已選下拉按鈕的值減少大一格下拉按鈕的階梯
- ArrowRight 將焦點移至元件中的下一個下拉框
- ArrowLeft 將焦點移至元件中的前一個下拉框
幾個 label-* 道具在螢幕上不可見，但用於標記電子螢幕閱讀器使用者日曆中的各種元素。例如，label-selected 道具會加入到顯示已選值的元素。
在國際化日期選取器時，重要的是還要更新 label-* 道具，並附上適當的已翻譯字串，以便國際電子螢幕閱讀器使用者可以聽見正確的提示和說明。
實作注意事項
<b-time> 元件是基於 BootstrapVue 自訂元件 <b-form-spinbutton>。
<b-time> 使用 Bootstrap 的邊框和彈性公用類別，以及按鈕 (btn-*) 類別和 form-control 類別。BootstrapVue 自訂 SCSS/CSS 也需要進行適當的樣式設定。
請參閱