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中的scoped和 elememt-plus的样式修改方法
Vue中的scoped属性用于实现样式隔离,确保组件间的样式互不影响,通过在组件的style标签内添加任何内容,可以为组件生成一个唯一的哈希值,从而实现样式的定位,本文通过实例代码讲解Vue中的scoped和 elememt-plus的样式修改方法,感兴趣的朋友一起看看吧
2025-01-01
如何解决vue在ios微信"复制链接"功能问题
这篇文章主要介绍了如何解决vue在ios微信"复制链接"功能问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
简单聊聊vue2.x的$attrs和$listeners
vue组件之间的通信方式有很多种,props/emit,event bus,vuex,provide/inject等,还有一种通信方式就是$attrs和$listeners,下面这篇文章主要给大家介绍了关于vue2.x中$attrs和$listeners的相关资料,需要的朋友可以参考下
2022-03-03
在vue中使用 jquery 的两种方法小结
这篇文章主要介绍了在vue中使用 jquery 的两种方法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue移动端UI框架实现QQ侧边菜单组件
这篇文章主要介绍了vue移动端UI框架实现仿qq侧边菜单组件,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2018-03-03
vue监听浏览器原生返回按钮,进行路由转跳操作
这篇文章主要介绍了vue监听浏览器原生返回按钮,进行路由转跳操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
Vue中使一个div铺满全屏的实现
最近在项目开发中,就遇到了这个问题,Vue中如何使一个div铺满全屏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-07-07
JavaScript 沙箱探索
这篇文章主要介绍了JavaScript 沙箱探索，沙箱是基于 event bus 形式的通信实现上层的功能，文章的例子选择接口实现了 web worker 与 quickjs 的 EventEmitter，,需要的朋友可以参考一下
2021-10-10
一起来学习Vue的组件间通信方式
这篇文章主要为大家详细介绍了Vue的组件间通信方式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
vue如何关闭prettier警告warn
这篇文章主要介绍了vue如何关闭prettier警告warn问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03