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

場景

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

實現效果如下

 

 

注：

博客：
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/PM A	'HH:mm:ss'

Events

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

Methods

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