Vue.js element-ui date-picker日期选择后格式化为yyyy-mm-dd格式

最新推荐文章于 2024-07-14 22:44:48 发布
最新推荐文章于 2024-07-14 22:44:48 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： Vue.js Element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjxfox/article/details/90267745
版权

项目中需要的日期格式为yyyy-mm-dd，但是我们在使用的element-ui的 日期选择器后默认的时间格式为

Fri Sep 07 2018 00:00:00 GMT+0800 (中国标准时间)

折腾了半天找到一种完美的方法，这记载datepicker中添加一句value-format=”yyyy-MM-dd” 即可，以下这样：

<el-date-picker v-model="winningTime" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyyMMdd"></el-date-picker>

 

yjxfox
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js element-ui validate中代码不执行问题解决方法
10-18
在Vue.js开发中，Element UI库提供了一套强大的表单组件和验证机制，方便开发者创建交互丰富的表单。然而，在实际使用中，我们可能会遇到validate方法不执行的问题，导致表单验证无法正常工作。本文将深入探讨这个...
vue + element实现el-date-picker的时间格式转换，以及自定义时间格式，修改输入的时间格式
qq_41180882的博客
02-28 4211
实现日期选择输入框的时间格式转换、根据数据的情况自动化格式为需要的格式，如果只是需要修改传给后端的值或者格式，可以使用 value-format实现，可以在文档上查看详细的介绍。
elementUI时间选择器(el-date-picker)输入格式的转换与自定义
weixin_44490109的博客
03-10 1万+
目录1、背景2、方案设计3、说明 1、背景 现在很多的web端管理系统会选用vue+element-ui这套技术体系去实现前端界面开发。在使用时间控件的时候的时候，很多用户会希望输入202103100915能够显示成2021-03-10 09:15或2021/03/10 09:15等，总而言之就是输入方便，显示优美。效果如下图所示： 2、方案设计 刚刚听SA给我提这个需求的时候，我的第一反应就是去Element官网看看是否有什么属性支持自定义输入的，还真别说，找到了下面两个属性，于是就迫不及待的拿来试了试
vue 中时间日期格式处理
最新发布
wk的博客
07-14 2197
<p>格式化日期: <span v-date-format="dateString"></span></p><p>自定义格式: <span v-date-format:YYYY/MM/DD="dateString"></span></p>data() {return {
vue 时间格式相互转化以及判断汇总
记录技术的小本本
01-15 2281
vue 时间格式相互转化 1、转化YYYYMMDDHHMMSS时间格式为YYYY-MM-DD HH:MM:ss export function changeTime(time) { var newtime = '' newtime = time.substring(0, 4) + '-' + time.substring(4, 6) + '-' + time.substring(6, 8) + ' ' + time.substring(8, 10) + ':' + time.substring(10
在vue+element中手动写日期格式化转换为“yyyy-MM-dd hh:mm:ss”
暖一杯茶的博客
06-29 1253
element中使用时间选择器的时候设置时分秒会报错，所以自己写了一个方法 <el-date-picker v-model="ruleForm.signing_date" type="datetime" placeholder="签约时间" ></el-date-picker> 在methods中写一个方法↓ //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化 dateFormat:function(time) { var date=new
vue element-ui 里el-date-picker时间日期选择器转换北京时间yyyy-mm-dd格式
weixin_52810002的博客
03-05 1785
** vue element-ui 里el-date-picker时间日期选择器转换北京时间yyyy-mm-dd格式** 只需在组件中加上 value-format=“yyyy-MM-dd” 属性即可 可以看到打印出来已经是我们要用的时间了 完美！！！
vue-ctk-date-time-picker:VueJS组件选择日期和时间，包括范围模式
04-13
VueCtkDateTimePicker 用于选择日期（可用范围模式）和时间的Vue组件 本文档适用于v2。*。 查找v1文档暗模式演示版安装纱yarn add vue-ctk-date-time-picker NPM npm i --save vue-ctk-date-time-picker用法ES6模块/...
VUE.js+element-ui实现JSON编辑器
07-24
Vue.js和Element-UI是现代前端开发中常用的两个框架，Vue.js作为一个轻量级的JavaScript框架，以其易学易用、高效和灵活的特点受到了广大开发者喜爱。Element-UI则是一套基于Vue.js的企业级UI组件库，提供了丰富的...
elementUi 的 el-date-picker组件 设置日期范围时间格式问题
长缨缚苍龙
08-04 1160
el-date-picker组件 设置日期范围时间格式问题，经测试当value-format="yyyy-MM-dd"进行时间格式化时不能正常使用组件，需要改为全部大写就可以正常使用了，
Element DatePicke时间筛选转yyyy-MM-dd格式字符串
caoyan0829的博客
09-10 847
1.选择时间，经过处理看打印结果 2.js代码 datePickerChange(item) { console.log('startTime:',item[0]) console.log('endTime:',item[1]) if (item) { //startTime let d1 = new Date(item[0]); let dm1 = d1.getMonth() ..
element-ui date-picker日期格式化(三种方法)总结
热门推荐
LONGLONGAGO_RU的博客
05-21 4万+
一，日期格式为yyyy-mm-dd 1，项目中需要的日期格式为yyyy-mm-dd，但是我们在使用的element-ui的 日期选择器后默认的时间格式为 Fri Sep 07 2018 00:00:00 GMT+0800 (中国标准时间) 2，datepicker中添加一句value-format=”yyyy-MM-dd” 即可 <el-date-picker type="date" v-...
【vue】时间戳、中国标准时间等格式转换时间样式（yyyy-MM-dd）
栀妹儿的炼丹炉
03-19 1万+
1.后端传来的是完整的时间格式：" 2020-03-06 17:26:40 " 想要显示年月日：“ 2020-03-06 ” {{(item.beginDate || '').split(' ')[0]}}-{{(item.endDate || '').split(' ')[0]}} 本页显示样式： 我这里做的是mobile端界面，所需要显示的时间数据在一个flexbox 下的flexbox-...
element-ui DatePicker 日期选择后格式化为yyyy-mm-dd格式的处理
邪小新的博客
09-27 2323
使用format指定输入框的格式；使用value-format指定绑定值的格式。 例子 <el-date-picker v-model="orderRequire.birthday" value-format="yyyy-MM-dd" type="date" pl...
ElementUI日期转为“yyyy-MM-dd“格式
vvv3171071的博客
11-23 7748
一般情况下，我们需要给后台的时间格式是： “yyyy-MM-dd” 但是使用Element ui日期选择器DatePicker获取的值是这样的： Thu Nov 04 2021 00:00:00 GMT+0800 (中国标准时间) 在官方文档中，有提到可以使用value-format 日期格式我们采用"yyyy-MM-dd"，此时，我们只需在时间选择器上加value-format="yyyy-MM-dd"的属性就可以了 若使用的是选择日期范围型的DatePicker，返回的时间值为一个数组
vue el-date-picker转换时间格式的几种方式
a576837179的博客
12-25 1万+
方式一: 使用value-format，该属性是dateValue绑定值的格式； <el-date-picker v-model="datevalue" type="datetimerange" value-format="yyyy-NM-dd hh" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :disabled="isDisabled"> &lt
elementUI的DateTimePicker组件日期时间格式改成yyyy-MM-dd hh:mm:ss
weixin_43734732的博客
12-15 4696
如果只是copy官网上的demo的话选择时间后打印出来的时间格式如下 2019-12-15T05:28:29.000Z 想要改成yyyy-MM-dd hh:mm:ss格式需要加上value-format属性，具体代码如下 <el-form-item label="支付时间" prop="payTime"> <el-date-picker va...
VUE - element ui 时间改为YYYY-MM-DD HH:mm:ss格式
vransy的博客
04-24 2022
<el-form-item label="生效时间" prop="validtime"> <el-date-picker clearable v-model="form.validtime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择生效时间"> ...
vue3 el-date-picker 日期时间格式
08-19
在Vue 3中使用el-date-picker组件设置日期时间格式，可以通过在el-date-picker组件上使用format属性来指定日期的显示格式。下面是一个示例代码: ```html <template> <div> <el-date-picker v-model="date" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" ></el-date-picker> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const date = ref(null); return { date, }; }, }; </script> ``` 在上面的代码中，我们将el-date-picker的type属性设置为"datetime"以显示日期和时间。然后，我们使用format属性将日期时间格式设置为"yyyy-MM-dd HH:mm:ss"。你可以根据需要调整格式。 请确保已正确导入和安装了element-ui组件库，并且已经在项目中注册了el-date-picker组件。 希望这对你有所帮助！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值