赞
踩
要实现在前端选择一个一天中的时间并传递到后端。
实现效果如下
注：
博客：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'
是格式化传值时的样式
这样后台接收到的参数为：
其他属性
参数
说明
类型
可选值
默认值
readonly
完全只读
boolean
—
false
disabled
禁用
editable
文本框可输入
true
clearable
是否显示清除按钮
size
输入框尺寸
string
medium / small / mini
placeholder
非范围选择时的占位内容
start-placeholder
范围选择时开始日期的占位内容
end-placeholder
范围选择时结束日期的占位内容
is-range
是否为时间范围选择，仅对<el-time-picker>有效
arrow-control
是否使用箭头进行时间选择，仅对<el-time-picker>有效
value
绑定值
date(TimePicker) / string(TimeSelect)
align
对齐方式
left / center / right
left
popper-class
TimePicker 下拉框的类名
picker-options
当前时间日期选择器特有的选项参考下表
object
{}
range-separator
选择范围时的分隔符
-
'-'
value-format
可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象
见日期格式
default-value
可选，选择器打开时默认显示的时间
Date(TimePicker) / string(TimeSelect)
可被new Date()解析(TimePicker) / 可选值(TimeSelect)
name
原生属性
prefix-icon
自定义头部图标的类名
el-icon-time
clear-icon
自定义清空图标的类名
el-icon-circle-close
start
开始时间
09:00
end
结束时间
18:00
step
间隔时间
00:30
minTime
最小时间，小于该时间的时间段将被禁用
00:00
maxTime
最大时间，大于该时间的时间段将被禁用
selectableRange
可选时间段，例如'18:30:00 - 20:30:00'或者传入数组['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']
string / array
format
时间格式化(TimePicker)
小时：HH，分：mm，秒：ss，AM/PM A
'HH:mm:ss'
事件名
change
用户确认选定的值时触发
组件绑定值
blur
当 input 失去焦点时触发
组件实例
focus
当 input 获得焦点时触发
方法名
使 input 获取焦点