关于element DatePicker 日期选择器默认值渲染的问题(渲染成想要的格式且数据、数据格式对)

最新推荐文章于 2025-02-23 21:25:53 发布
原创 最新推荐文章于 2025-02-23 21:25:53 发布 · 978 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #elementui

日期格式
使用format指定输入框的格式；使用value-format指定绑定值的格式。

默认情况下，组件接受并返回Date对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：

在这里插入图片描述
这里注意的是默认情况，而绝大多数我们都是yyyyMMdd或者yyyy-MM-dd的格式，这时候我们不需要new date()去初始化了，有的情况使用date对象初始化反而会有异常，我们完全可以用yyyyMMdd格式的字符串去初始化下拉框

在这里插入图片描述
在这里插入图片描述

<el-date-picker v-model="visitForm.callon_date" type="date" format="dd-MM-yyyy" value-format="yyyyMMdd" :placeholder="$t('loginInfo.selectDate')"> </el-date-picker>

在这里插入图片描述
在这里插入图片描述
这里发过去的时间由于是佛教时间所以有额外方法减了年份543，存真实现实时间。

总结： element vue2.2 我们完全可以用yyyyMMdd格式的字符串去初始化DatePicker 日期选择器下拉框（在指定value-format前提下）

前端DatePicker组件设置默认日期并限制可选日期范围
蚂蚁搬砖我砌墙
09-03 1750
在使用DatePicker 组件时，实现一进页面就给日期设置一个默认查询范围（近7天），并且限制用户可以选择查询日期的范围为近一个月
element -ul 日期选择器（日期格式化，默认值）
吴小花的博客
04-28 5097
需求：实现如下效果 1.默认展示最近三个月， 2.不能选择今天之后的日期，即不能选未来的时间 3.带快捷选项，并且快捷选项的【全部时间】开始时间为某个指定的时间如（2010年8月1日） element-ul 可以很容易实现第二，第三条需求。但是默认数据那个，要自己写。还有选全部时间，从指定日期开始，也废了我一番功夫研究。 所以，最终将研究成果整理出来。方便下次遇到同样的问题能快速解决，提升个人的开发效率。也方便其他小伙伴有同样困惑，可以快速寻得解决方案。 解决过程及代码解析 涉及2个文件（
iview中DatePicker日期选择器设置默认值
帅的博客
07-07 915
iview中DatePicker日期选择器设置默认值
前端开发VUE使用iView的DatePicker 设置默认值
03-02
我们在用Vue做前端时，经常会用到iView的UI控件，比如说日期选择器就是比较常用的。官方文档都提供了源码，但未提供设置默认值的代码。所以就得我们自己开看控件说明自己编写实现。本文档就是说明怎么在使用iView 的DatePicker控件时自己设置想要的默认值。
el-date-picker区间设置默认值（当前月第一天到当天）
Tessa_zzl的博客
04-12 1万+
el-date-picker区间设置默认值（当前月第一天到当天） el-date-picker设置为daterange日期区间 <el-date-picker v-model="dateVals" type="daterange" value-format="yyyy-MM-dd" range-separator="-" ...
使用element ui 日期选择器获取值后的格式问题
weixin_34216196的博客
10-23 1360
一般情况下，我们需要给后台的时间格式是： "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的： Fri Sep 22 2017 00:00:00 GMT+0800 (中国标准时间) 在官方文档中，有提到可以使用change <el-date-picker type="date" v-model="sTime" @chan...
使用jQuery日期选择器格式化日期
标题“Format Date with Date Picker using Jquery.zip”明确指出了该文件的核心功能：使用 jQuery 实现带有日期选择器（Date Picker）的日期格式化功能。结合描述“JavaScript”以及标签中的关键词如“jQuery”、...
Element UI日期选择器默认显示1970年解决方案
最新发布
cuishujian_2003的博客
02-23 2015
通过绑定 `Date` 对象而非数字、正确处理数据转换和事件监听，可以彻底解决 Element UI 日期选择器默认显示1970年的问题。初始化时使用日期对象。交互时提取年份数字。动态切换时刷新数据。正确实现后的效果：日期选择器默认显示当前年份，切换年份时数据动态更新，用户体验流畅。
Elementui中日期选择器的使用
大白能的博客
07-09 3506
准备 这里使用了moment.js 关于moment.js的使用,请看Vue项目中使用moment.js 日期选择器的使用 首先定义一个子组件DatePicker.vue <template> <el-form-item :label="label" label-width="80px"> <el-date-picker v-model="date" :picker-options="pickerOptions" type="da
【Element】日期时间选择器【封装 】- 开始时间不能晚于结束时间+底部”清空“按钮不关闭日期框
BMG-Princess
02-24 2167
目录 始于2018，结于2021 具体说明 template: data: 监听值的变化 ： 在接口中传入: 时间日期选择器 - 开始时间不能晚于结束时间 始于2018，结于2021 具体说明 template: <el-date-picker type="datetime" :time-arrow-control="true" :picker-options="pickerOptions0" v-model="startDate" format="y......
date-picker设置默认值（今天或指定日期）
LoKk11的博客
11-03 3587
date-picker设置默认值（今天或指定日期）
Antd组件的使用 --- DatePicker（设置默认值）
wu_2004的博客
05-18 4510
它接收的是一个dayjs类型的值，所以我们需要借助一个库。将日期进行转化为dayjs格式。
DatePicker组件设置默认值 setFieldsValue方法 (BraftEditor富文本编辑器 )
weixin_42481234的博客
11-15 8651
其实用setFieldsValue或者获取setState方法都可以设置DatePicker的默认值。 setState方法： &lt;FormItem label="日期选择框"&gt; {getFieldDecorator('date', { initialValue: moment("自定义默认日期", 'YYYY-MM-DD'), })( ...
el-date-picker设置日期默认值（当月月初至月末）
kobe_IT的博客
04-06 1万+
el-date-picker设置日期默认值（当月月初至月末）
antform setFieldsValue 设置datepicker默认值
m0_46678809的博客
01-07 654
【代码】antform setFieldsValue 设置datepicker默认值。
DatePicker日期选择器怎么设置默认值
qq_45780380的博客
05-07 1万+
DatePicker日期选择器怎么设置默认值 当你使用DatePicker日期选择器设置好如下图的样子： 当你想要一个默认值怎么办呢？如下图这个样子。 在这里给data下面组件v-model绑定的数据一个初始化的值。 XX:new Date(new Date(new Date().getTime())); 就不需要再写函数了。 ...
使用el-date-picker渲染报错
hdy119yaner的博客
07-26 1748
el-date-picker报错 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "placement"
daterange类型的el-date-picker设置默认值为当天
m0_62796616的博客
01-11 3709
daterange类型的el-date-picker设置默认值为当天 显示在选择器上
Vue2 Element DatePicker组件设置默认日期、控制日期范围
热门推荐
白瑕 的博客
08-23 1万+
DatePicker设置默认日期、控制日期范围、动态默认日期、获取日期
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值