iview 日期组件DatePicker数据初始化操作

最新推荐文章于 2024-07-07 11:26:33 发布
最新推荐文章于 2024-07-07 11:26:33 发布
阅读量696 收藏
点赞数
分类专栏： vue 文章标签： vue iview DatePicker
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TaTaPark/article/details/115367130
版权

项目中iview日期组件不设置value值，又想切换初始化日期组件可通过设置ref操作实现

DOM：

<DatePicker

......

ref='resetDate'

></DatePicker>

 

JS:

if(this.$refs && this.refs.resetDate){

     this.refs.resetDate.handleClear()

}

TaTaPark
关注
专栏目录
Vue iView时间组件DatePicker，设置开始时间和结束时间约束、初始值和格式（年月日）
qq_36649922的博客
05-31 3668
html代码： <FormItem label="开始时间"> <DatePicker type="date" :options="startOption" v-model="createForm.startDate" ></DatePicker> </FormItem> <FormItem label="结束时间"> <DatePicker
iview中DatePicker双向绑定重新赋值后,表单必选日期验证失败
zhongqing1995的博客
01-11 773
iview中DatePicker双向绑定重新赋值后,表单必选日期验证失败 例: <Form ref="InsertReimInvoiceItemBo" :model="InsertReimInvoiceItemBo" :rules="InsertValidate" :label-width="80" > <Row> <Col span="12"> <FormI
前端开发VUE使用iView的DatePicker 设置默认值
03-02
我们在用Vue做前端时，经常会用到iView的UI控件，比如说日期选择器就是比较常用的。官方文档都提供了源码，但未提供设置默认值的代码。所以就得我们自己开看控件说明自己编写实现。本文档就是说明怎么在使用iView 的DatePicker控件时自己设置想要的默认值。
iView里的日期控件（DatePicker）范围初始化
左直拳的马桶_日用桶
08-06 1249
iView里有个日期控件：DatePicker，功能很强，还支持时间范围，太贴心了。照以往，一般是要设置2个时间选取控件的。 但问题是，如何用初始值去初始化它呢？ 答案是赋给它一个时间数组，数组2个元素，一个开始时间，一个结束时间，都是Date类型。 <FormItem label="预警日期" prop="dtRange"> <DatePicker type="datetimerange" format="yyyy年MM月dd日HH时mm分" v-model
iview中DatePicker日期选择器设置默认值
最新发布
wangshuai13383347132的博客
07-07 352
iview中DatePicker日期选择器设置默认值
Vue -- iview 中，给DatePicker赋初始值时报错： Invalid prop: type check failed for prop "value". Expected Date..
Emily
08-16 3172
在项目中，给 DatePicker 日期选择器赋初始值时，报了错：type check failed for prop "value". Expected Date, String, Array, got Number with value 2019。 具体如下： 原因：给DatePicker 赋的值必须是date类型，如果是字符串类型的，则需要使用new Date(value)将值转为...
iView - Form中想要重置DatePicker生效，必须给DatePicker绑定value属性
weixin_30593443的博客
11-30 619
Form中想要重置DatePicker生效，必须给DatePicker绑定value属性 转载于:https://www.cnblogs.com/andremao/p/7929200.html
Iview DatePicker daterange 范围修改, 官网都是用秒做的单位
weixin_42481234的博客
02-28 1705
修改版Demo: optionsDate: { shortcuts: [ { text: '一周卡', value () { c...
iView UI常用组件DatePicker清空技巧
S筱潇S四维Smile
04-15 2083
清空DatePicker（日期选择器）的方法： this.$refs.element.handleClear() 清空TimePicker（时间选择器）的方法： this.$refs.element.handleClear() 清空Select组件的方法： this.$refs.element.clearSingleSelect() 清空Table组件的方法： this.$refs.element.selectAll(flase) 清空input组件的方法：直接让绑定的变量等..
iview 自定义时间选择器组件_表单组件 - TimePicker 时间选择器 - 《iview v3.x 官方文档手册》 - 书栈网 · BookStack...
weixin_39857899的博客
12-20 519
TimePicker 时间选择器概述选择或输入标准时间，支持选择范围。代码示例基础用法设置属性 type 为 time 或 timerange 分别显示选择单个时间和选择范围时间类型。设置属性 placement 可以更改选择器出现的方向，与 Poptip 和 Tooltip 配置一致，支持 12 个方向，详见 API。exportdefault{}时间格式设置属性 format 可以改变时间的显...
iview前端向后端传数据一直转圈_记一次开发过程中，iview遇到的一些坑以及解决办法...
weixin_39959482的博客
12-22 783
写在开头：本次项目采用的是vue2.0+iview3.0，最近公司没啥事，来总结一下开发过程中遇到的问题。1、Modal关闭问题需求背景：modal框里面是个form表单，点击确定之后，先验证form表单，验证通过则关闭modal框，验证不成功则提示用户，不关闭。问题描述：本来刚开始想通过modal框v-model绑定的值(true或false)来进行控制，手动改之后，报错。解决办法：官方ivie...
日期选择控件（可防止屏幕旋转抛出的异常）
07-13
// 初始化默认日期 Calendar calendar = Calendar.getInstance(); selectedDate.setValue(calendar); } public MutableLiveData<Calendar> getSelectedDate() { return selectedDate; } } // 在Activity中 ...
【vue】iview组件 DatePicker 日期选择器如何显示默认当前日期
热门推荐
阿杰
10-20 1万+
为了方便用户体验，上头要求日期选择应该给一个默认的日期，查了查iview的官网，发现没有写，就自己找了一个办法 代码 html <DatePicker class="dpt_font" v-model="meetingDate.meetingDate" format="yyyy/MM/dd" type="date" :options="options" placeholder="选择时间" ...
iview datePicker 出现选择日期然后重新初始化上次的点选日期段仍然是选中状态的问题
qq_28246519的博客
03-13 1010
datePicker组件有一属性ref，ref=“producetime” 可以打印出ref属性，发现其中存在internalValue，focusedDate 于是，当切换后又想初始的时候可以对这两个属性进行赋值 this.$refs['producetime'].internalValue=[new Date(this.paramsTime.timeStart),new...
dateTimePicker 设置空默认值
月亮哥的专栏
10-15 2577
1.属性中ShowCheckBox选择True，format选择Custom，然后Checked选择false 2.事件选择mousedown 3.代码为 if (!this.dateTimePicker.Checked) { this.dateTimePicker.Format = DateTimePickerFormat.Custom; this.dateTimePicker.CustomFormat = " "; this.dateTimePicker.Text = "
VUEJS入坑日记.2 -DatePicker设置默认日期
weixin_33734979的博客
08-28 1万+
iview中DatePicker 的value属性和v-modal不能同时使用。 &lt;FormItem prop="s_date" label="出生日期："&gt; &lt;DatePicker type="date" format="yyyy-MM-dd" placeholder="-请选择-" :value="value1" v-model
iview中DatePicker组件赋值少一天问题
06-03
iview中的DatePicker组件在获取日期值时，会自动将日期转换为UTC时间，并且在显示时会将UTC时间转换为本地时间。如果你在给DatePicker组件赋值时，使用的是本地时间，而在获取DatePicker组件的值时，又使用了UTC时间，就会导致少一天的问题。解决这个问题的方法是，使用moment.js对日期进行格式化和转换，在给DatePicker组件赋值和获取DatePicker组件的值时，都使用moment.js转换过的日期值。 例如，假设你有一个日期值为"2021-01-01"的字符串，你想要将它赋值给一个DatePicker组件，并获取它的值。你可以使用以下代码： ``` import moment from 'moment'; // 将日期字符串转换为moment对象 const date = moment('2021-01-01'); // 给DatePicker组件赋值 this.date = date.format('YYYY-MM-DD'); // 获取DatePicker组件的值 const value = moment(this.date).utc().format('YYYY-MM-DD'); ``` 在这个例子中，我们首先使用moment.js将日期字符串转换为moment对象，然后在给DatePicker组件赋值时，使用moment.js格式化日期并转换为本地时间。在获取DatePicker组件的值时，我们先将DatePicker组件的值转换为UTC时间，然后再使用moment.js格式化日期。这样做可以确保赋值和获取值时使用的都是同一种日期格式，避免了少一天的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

TaTaPark

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值