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……没继续查找

总结

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

您可能感兴趣的文章:

Vue项目的网络请求代理到封装步骤详解
这篇文章主要介绍了Vue项目的网络请求代理到封装步骤,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
webpack4+express+mongodb+vue实现增删改查的示例
这篇文章主要介绍了webpack4+express+mongodb+vue 实现增删改查的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
Vue组件之Tooltip的示例代码
这篇文章主要介绍了Vue组件之Tooltip的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
Vite版本更新检查实现页面自动刷新的解决思路
这篇文章主要给大家介绍了关于Vite版本更新检查实现页面自动刷新的解决思路,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-02-02
Vue项目环境搭建详细总结
这篇文章主要为大家介绍了Vue项目环境搭建总结篇，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
这篇文章主要介绍了详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
vue中el-select中多选回显数据后没法重新选择和更改的解决
本文主要介绍了vue中el-select中多选回显数据后没法重新选择和更改解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-01-01
少女风vue组件库的制作全过程
这篇文章主要给大家介绍了关于少女风vue组件库的制作全过程，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05
关于Vue单页面骨架屏实践记录
这篇文章主要给大家介绍了关于Vue单页面骨架屏实践的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-12-12
VUE3安装element ui失败的原因以及解决办法
这篇文章主要给大家介绍了关于VUE3安装element ui失败的原因以及解决的相关资料,很多朋友升级使用Vue3了,但在安装element ui失败出错了,这里给大家总结下,需要的朋友可以参考下
2023-09-09