1. TimePicker時間選擇器

1.1. 用于選擇或輸入日期。

1.2. 時間選擇器屬性

參數	說明	類型	可選值	默認值
value / v-model	綁定值	date(TimePicker) / string(TimeSelect)	無	無
readonly	完全只讀	boolean	無	false
disabled	禁用	boolean	無	false
editable	文本框可輸入	boolean	無	true
clearable	是否顯示清除按鈕	boolean	無	true
size	輸入框尺寸	string	medium / small / mini	無
placeholder	非范圍選擇時的占位內容	string	無	無
start-placeholder	范圍選擇時開始日期的占位內容	string	無	無
end-placeholder	范圍選擇時開始日期的占位內容	string	無	無
is-range	是否為時間范圍選擇, 僅對<el-time-picker>有效	boolean	無	false
arrow-control	是否使用箭頭進行時間選擇, 僅對<el-time-picker>有效	boolean	無	false
align	對齊方式	string	left / center / right	left
popper-class	TimePicker下拉框的類名	string	無	無
picker-options	當前時間日期選擇器特有的選項參考下表	object	無	{}
range-separator	選擇范圍時的分隔符	string	無	'-'
value-format	可選, 僅TimePicker時可用, 綁定值的格式。不指定則綁定值為Date對象	string	見日期格式	無
default-value	可選, 選擇器打開時默認顯示的時間	Date(TimePicker) / string(TimeSelect)	可被new Date()解析(TimePicker) / 可選值(TimeSelect)	無
name	原生屬性	string	無	無
prefix-icon	自定義頭部圖標的類名	string	無	el-icon-time
clear-icon	自定義清空圖標的類名	string	無	el-icon-circle-close

1.3. Time Select Options

參數	說明	類型	可選值	默認值
start	開始時間	string	無	09:00
end	結束時間	string	無	18:00
step	間隔時間	string	無	00:30
minTime	最小時間, 小于該時間的時間段將被禁用	string	無	00:00
maxTime	最大時間, 大于該時間的時間段將被禁用	string	無	無

1.4. Time Picker Options

參數	說明	類型	可選值	默認值
selectableRange	可選時間段, 例如: '18:30:00 - 20:30:00'或者傳入數組['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']	string / array	無	無
format	時間格式化(TimePicker)	string	小時: HH, 分: mm, 秒：ss, AM/PM	'HH:mm:ss'

1.5. 時間選擇器事件

事件名稱	說明	參數
change	用戶確認選定的值時觸發	組件綁定值
blur	當input失去焦點時觸發	組件實例
focus	當input獲得焦點時觸發	組件實例

1.6. 時間選擇器方法

方法名	說明
focus	使input獲取焦點

2. 時間選擇器例子

2.1. 使用腳手架新建一個名為element-ui-timepicker的前端項目, 同時安裝Element插件。

2.2. 編寫App.vue?

<template><div id="app"><h1>固定時間點-提供幾個固定的時間點供用戶選擇</h1><h4>使用el-time-select標簽, 分別通過start、end和step指定可選的起始時間、結束時間和步長。</h4><el-time-select v-model="val1" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="選擇時間"></el-time-select><h1>任意時間點</h1><h4>使用el-time-picker標簽, 通過selectableRange限制可選時間范圍。提供了兩種交互方式: 默認情況下通過鼠標滾輪進行選擇, 打開arrow-control屬性則通過界面上的箭頭進行選擇。</h4><el-time-picker v-model="val21" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意時間點"></el-time-picker><div style="display: inline-block; margin-left: 20px;"></div><el-time-picker arrow-control v-model="val22" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意時間點"></el-time-picker><h1>固定時間范圍</h1><h4>若先選擇開始時間, 則結束時間內備選項的狀態會隨之改變。</h4><el-time-select placeholder="起始時間" v-model="startTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"></el-time-select><div style="display: inline-block; margin-left: 20px;"></div><el-time-select placeholder="結束時間" v-model="endTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"></el-time-select><h1>任意時間范圍-可選擇任意的時間范圍</h1><h4>添加is-range屬性即可選擇時間范圍, 同樣支持arrow-control屬性。</h4><el-time-picker is-range v-model="val41" range-separator="至" start-placeholder="開始時間" end-placeholder="結束時間" placeholder="選擇時間范圍"></el-time-picker><div style="display: inline-block; margin-left: 20px;"></div><el-time-picker is-range arrow-control v-model="val42" range-separator="至" start-placeholder="開始時間" end-placeholder="結束時間" placeholder="選擇時間范圍"></el-time-picker></div> </template><script> export default {data () {return {val1: '',val21: new Date(2016, 9, 10, 18, 40),val22: new Date(2016, 9, 10, 18, 40),startTime: '',endTime: '',val41: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],val42: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]}} } </script>

2.3. 運行項目

總結

以上是生活随笔為你收集整理的014_TimePicker时间选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。