vue3项目+element-plus:时间选择器格式化方式

更新时间：2024年03月18日 09:47:25 作者：一杯清酒.

这篇文章主要介绍了vue3项目+element-plus:时间选择器格式化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3项目+element-plus:时间选择器格式化

让时间选择器获取的时间格式化；

此处elementUI和element-plus的API不同

关键两行代码：

format="YYYY/MM/DD hh:mm:ss"
value-format="YYYY-MM-DD h:m:s"

 <el-date-picker
                  v-model="addForm.time"
                   type="datetime"
                   placeholder="请选择日期"
                   format="YYYY/MM/DD hh:mm:ss"
                   value-format="YYYY-MM-DD h:m:s"/>

element-plus日期选择器value-format出错

设置日期选择器DatePicker，使用valu-formate，根据element官网代码应该是如下写法：

  <div class="block">
    <span class="demonstration">使用 value-format</span>
    <div class="demonstration">值：{{ value2 }}</div>
    <el-date-picker
      v-model="value2"
      type="date"
      placeholder="选择日期"
      format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd">
    </el-date-picker>
  </div>

但是设置日期后会得到的值为“yyyy-02-Mo”

网上没有搜到原因，用的是vue3，element-plus，github上查看了一下

源码【packages/time-picker/src/common/picker.vue】文档用的是大写

就将格式化的格式写为 format="YYYY-MM-DD" value-format="YYYY-MM-DD" 。

嗯……emm……就是大写……然后好了……不知道为啥ε(┬┬﹏┬┬)3

时间戳转换是

format="YYYY/MM/DD"
value-format="X"  【10位】
value-format="x"  【13位】

但是选择框没有显示，找了一会说是dayjs……没继续查找

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3 reactive响应式赋值页面不渲染的解决
这篇文章主要介绍了Vue3 reactive响应式赋值页面不渲染的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
详解vuex中action何时完成以及如何正确调用dispatch的思考
这篇文章主要介绍了详解vuex中action何时完成以及如何正确调用dispatch的思考，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
vue项目中echarts自适应问题的高级解决过程
虽然老早就看过很多echarts的例子,但自己接触的项目中一直都没有真正用到过,直到最近才开始真正使用,下面这篇文章主要给大家介绍了关于vue项目中echarts自适应问题的高级解决过程,需要的朋友可以参考下
2023-05-05
vue如何实现对请求参数进行签名
这篇文章主要介绍了vue如何实现对请求参数进行签名问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
基于Vue实现Excel解析与导出功能详解
导入导出excel这是前端做管理系统最常用的功能了,下面这篇文章主要给大家介绍了基于Vue实现Excel解析与导出功能的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-08-08
vue项目中如何将当前页面生成图片
这篇文章主要介绍了vue项目中如何将当前页面生成图片问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue 实现websocket发送消息并实时接收消息
这篇文章主要介绍了vue 实现websocket发送消息并实时接收消息,项目结合vue脚手架和websocket来搭建，本文给大家分享实例代码，需要的朋友可以参考下
2019-12-12
vue常用事件v-on:click详解事件对象,事件冒泡,事件默认行为
这篇文章主要介绍了vue常用事件之v-on:click 以及事件对象，事件冒泡，事件默认行为,其实v-on后面跟的不止是click事件也可以是其他的事件，用法均相似，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-08-08
使用Vue3生成二维码和条形码详细图文教程
在Vue项目和微信小程序中生成二维码和条形码是一个常见的需求,主要用于分享、产品识别等场景,这篇文章主要给大家介绍了关于使用Vue3生成二维码和条形码的相关资料,需要的朋友可以参考下
2024-09-09
VUE3基于vite封装条形码和二维码组件的详细过程
基础组件开发是项目业务开发的基石, 本文主要介绍了通过vue3的vite脚手架快速搭建项目, 开发条形码和二维码组件的过程,感兴趣的朋友跟随小编一起看看吧
2023-08-08