ElementUI中el-time-picker實現選擇時間並格式化顯示和傳參的格式

阿新 • • 發佈：2020-08-24

場景

要實現在前端選擇一個一天中的時間並傳遞到後端。

實現效果如下

注：

部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。

實現

            <el-form-item label="打卡時間" prop="dksj">
              <el-time-picker v-model="form.dksj" format = 'HH:mm' value-format = 'HH:mm' placeholder="選擇打卡時間"></el-time-picker>
            </el-form-item>

使用v-model實現雙向資料繫結。

屬性is-range設定為是否是時間範圍選擇器，不加這個屬性預設就是單個時間選擇器。

加的話就

 <el-time-picker v-model="form.dksj" is-range  format = 'HH:mm' value-format = 'HH:mm' placeholder="選擇打卡時間"></el-time-picker>

然後

format = 'HH:mm'

是格式化前端顯示的樣式

value-format = 'HH:mm'

是格式化傳值時的樣式

這樣後臺接收到的引數為：

其他屬性

Attributes

引數	說明	型別	可選值	預設值
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
value	繫結值	date(TimePicker) / string(TimeSelect)	—	—
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

Time Select Options

引數	說明	型別	可選值	預設值
start	開始時間	string	—	09:00
end	結束時間	string	—	18:00
step	間隔時間	string	—	00:30
minTime	最小時間，小於該時間的時間段將被禁用	string	—	00:00
maxTime	最大時間，大於該時間的時間段將被禁用	string	—	—

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/PMA	'HH:mm:ss'

Events

事件名	說明	引數
change	使用者確認選定的值時觸發	元件繫結值
blur	當 input 失去焦點時觸發	元件例項
focus	當 input 獲得焦點時觸發	元件例項