ElementUI中el-time-picker实现选择时间并格式化显示和传参的格式

短命女 2023-10-05 08:58 5阅读 0赞

## 场景 ##

要实现在前端选择一个一天中的时间并传递到后端。

实现效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][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'

是格式化传值时的样式

这样后台接收到的参数为：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

其他属性

#### Attributes ####

<table> 
 <thead> 
 <tr> 
 <th> 参数 </th> 
 <th> 说明 </th> 
 <th> 类型 </th> 
 <th> 可选值 </th> 
 <th> 默认值 </th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td> readonly </td> 
 <td> 完全只读 </td> 
 <td> boolean </td> 
 <td> — </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> disabled </td> 
 <td> 禁用 </td> 
 <td> boolean </td> 
 <td> — </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> editable </td> 
 <td> 文本框可输入 </td> 
 <td> boolean </td> 
 <td> — </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> clearable </td> 
 <td> 是否显示清除按钮 </td> 
 <td> boolean </td> 
 <td> — </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> size </td> 
 <td> 输入框尺寸 </td> 
 <td> string </td> 
 <td> medium / small / mini </td> 
 <td> — </td> 
 </tr> 
 <tr> 
 <td> placeholder </td> 
 <td> 非范围选择时的占位内容 </td> 
 <td> string </td> 
 <td> — </td> 
 <td> — </td> 
 </tr> 
 <tr> 
 <td> start-placeholder </td> 
 <td> 范围选择时开始日期的占位内容 </td> 
 <td> string </td> 
 <td> — </td> 
 <td> — </td> 
 </tr> 
 <tr> 
 <td> end-placeholder </td> 
 <td> 范围选择时结束日期的占位内容 </td> 
 <td> string </td> 
 <td> — </td> 
 <td> — </td> 
 </tr> 
 <tr> 
 <td> is-range </td> 
 <td> 是否为时间范围选择，仅对&lt;el-time-picker&gt;有效 </td> 
 <td> boolean </td> 
 <td> — </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> arrow-control </td> 
 <td> 是否使用箭头进行时间选择，仅对&lt;el-time-picker&gt;有效 </td> 
 <td> boolean </td> 
 <td> — </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> value </td> 
 <td> 绑定值 </td> 
 <td> date(TimePicker) / string(TimeSelect) </td> 
 <td> — </td> 
 <td> — </td> 
 </tr> 
 <tr> 
 <td> align </td> 
 <td> 对齐方式 </td> 
 <td> string </td> 
 <td> left / center / right </td> 
 <td> left </td> 
 </tr> 
 <tr> 
 <td> popper-class </td> 
 <td> TimePicker 下拉框的类名 </td> 
 <td> string </td> 
 <td> — </td> 
 <td> — </td> 
 </tr> 
 <tr> 
 <td> picker-options </td> 
 <td> 当前时间日期选择器特有的选项参考下表 </td> 
 <td> object </td> 
 <td> — </td> 
 <td> {} </td> 
 </tr> 
 <tr> 
 <td> range-separator </td> 
 <td> 选择范围时的分隔符 </td> 
 <td> string </td> 
 <td> - </td> 
 <td> '-' </td> 
 </tr> 
 <tr> 
 <td> value-format </td> 
 <td> 可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象 </td> 
 <td> string </td> 
 <td> 见日期格式 </td> 
 <td> — </td> 
 </tr> 
 <tr> 
 <td> default-value </td> 
 <td> 可选，选择器打开时默认显示的时间 </td> 
 <td> Date(TimePicker) / string(TimeSelect) </td> 
 <td> 可被new Date()解析(TimePicker) / 可选值(TimeSelect) </td> 
 <td> — </td> 
 </tr> 
 <tr> 
 <td> name </td> 
 <td> 原生属性 </td> 
 <td> string </td> 
 <td> — </td> 
 <td> — </td> 
 </tr> 
 <tr> 
 <td> prefix-icon </td> 
 <td> 自定义头部图标的类名 </td> 
 <td> string </td> 
 <td> — </td> 
 <td> el-icon-time </td> 
 </tr> 
 <tr> 
 <td> clear-icon </td> 
 <td> 自定义清空图标的类名 </td> 
 <td> string </td> 
 <td> — </td> 
 <td> el-icon-circle-close </td> 
 </tr> 
 </tbody> 
</table>

#### Time Select Options ####

<table> 
 <thead> 
 <tr> 
 <th> 参数 </th> 
 <th> 说明 </th> 
 <th> 类型 </th> 
 <th> 可选值 </th> 
 <th> 默认值 </th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td> start </td> 
 <td> 开始时间 </td> 
 <td> string </td> 
 <td> — </td> 
 <td> 09:00 </td> 
 </tr> 
 <tr> 
 <td> end </td> 
 <td> 结束时间 </td> 
 <td> string </td> 
 <td> — </td> 
 <td> 18:00 </td> 
 </tr> 
 <tr> 
 <td> step </td> 
 <td> 间隔时间 </td> 
 <td> string </td> 
 <td> — </td> 
 <td> 00:30 </td> 
 </tr> 
 <tr> 
 <td> minTime </td> 
 <td> 最小时间，小于该时间的时间段将被禁用 </td> 
 <td> string </td> 
 <td> — </td> 
 <td> 00:00 </td> 
 </tr> 
 <tr> 
 <td> maxTime </td> 
 <td> 最大时间，大于该时间的时间段将被禁用 </td> 
 <td> string </td> 
 <td> — </td> 
 <td> — </td> 
 </tr> 
 </tbody> 
</table>

#### Time Picker Options ####

<table> 
 <thead> 
 <tr> 
 <th> 参数 </th> 
 <th> 说明 </th> 
 <th> 类型 </th> 
 <th> 可选值 </th> 
 <th> 默认值 </th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td> selectableRange </td> 
 <td> 可选时间段，例如'18:30:00 - 20:30:00'或者传入数组['09:30:00 - 12:00:00', '14:30:00 - 18:30:00'] </td> 
 <td> string / array </td> 
 <td> — </td> 
 <td> — </td> 
 </tr> 
 <tr> 
 <td> format </td> 
 <td> 时间格式化(TimePicker) </td> 
 <td> string </td> 
 <td> 小时：HH，分：mm，秒：ss，AM/PM&nbsp;A </td> 
 <td> 'HH:mm:ss' </td> 
 </tr> 
 </tbody> 
</table>

#### Events ####

<table> 
 <thead> 
 <tr> 
 <th> 事件名 </th> 
 <th> 说明 </th> 
 <th> 参数 </th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td> change </td> 
 <td> 用户确认选定的值时触发 </td> 
 <td> 组件绑定值 </td> 
 </tr> 
 <tr> 
 <td> blur </td> 
 <td> 当 input 失去焦点时触发 </td> 
 <td> 组件实例 </td> 
 </tr> 
 <tr> 
 <td> focus </td> 
 <td> 当 input 获得焦点时触发 </td> 
 <td> 组件实例 </td> 
 </tr> 
 </tbody> 
</table>

#### Methods ####

<table> 
 <thead> 
 <tr> 
 <th> 方法名 </th> 
 <th> 说明 </th> 
 <th> 参数 </th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td> focus </td> 
 <td> 使 input 获取焦点 </td> 
 <td> - </td> 
 </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200824104558909.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200824104616710.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70