iview踩坑日记（一）——DatePicker

最新推荐文章于 2025-03-12 18:59:55 发布
最新推荐文章于 2025-03-12 18:59:55 发布
阅读量1.3k 收藏 2
点赞数 1
文章标签： view design 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_46264882/article/details/127654726
版权
本文介绍如何在iview中使用DatePicker组件将日期格式化为yyyy-MM-dd形式，适用于前后端数据交互需求。通过去除v-modal并使用:value与@on-change属性实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

iview使用DatePicker 进行格式化数据

背景：v-modal绑定的数据始终都是中国标准时间，但是传给后端以及回显的数据需要是yyyy-MM-dd的数据

iview API

在这里插入图片描述
在iview的api里面通过format可以设置界面展示的格式。

但是当你使用v-modal绑定数据时却始终发现你获得的数据时中国标准时间。

解决方法：

<DatePicker type="date" format="yyyy-MM-dd" :value="time" @on-change="time = $event"/>
  1. 去除v-modal
  2. 使用:value代替v-modal
  3. 使用@on-change进行赋值
  4. 添加format获取需要的格式数据
iview组件之DatePicker日期格式,显示格式化，后台传值也格式化特定格式如（yyyy-MM-dd）
jieweiwujie的博客
12-07 1948
其中on-change的作用就是把value值和format格式联系起来。value1的值就是format格式的。这样前台展示，和给后太传值都是固定格式字符串 "yyyy-MM-dd" 的格式，使用value替代model。
踩坑之路——微信小程序video原生组件层级过高解决方案
weixin_42556039的博客
10-30 4096
成品：   可以看到成品其实不是完全解决了问题，如果有更好的方法可以告知一下我，谢谢。 思路很简单，让video组件在不播放的时候隐藏，让替代品view呈现，当点击view时，让video显示出来。 我写了一个小组件供大家参考： wxml &lt;view class='view' style='{{style}};' bindtap='showVideo' hidden='{{sh...
前端开发VUE使用iView的DatePicker 设置默认值
03-02
我们在用Vue做前端时，经常会用到iView的UI控件，比如说日期选择器就是比较常用的。官方文档都提供了源码，但未提供设置默认值的代码。所以就得我们自己开看控件说明自己编写实现。本文档就是说明怎么在使用iView 的DatePicker控件时自己设置想要的默认值。
iview的DatePicker必填检验失败
最新发布
rongyi2233的博客
03-12 140
3.给 Form 设置属性 rules、model、ref。
【iView】日期组件 DatePicker
joanmelon的博客
11-01 922
年月2019/06 <Form ref="mydate" :model="currentDate" :rules="rules"> <FormItem label="期间" prop="date"> <DatePicker v-model="currentDate.date" type="month" 　　　　　　　 format="yyyy/MM" placeholde..
iview中DatePicker日期选择器设置默认值
帅的博客
07-07 720
iview中DatePicker日期选择器设置默认值
iview - 日期选择控件datePicker格式
热门推荐
idomyway的博客
05-21 1万+
前言     iview日期选择控件少一天问题         在时间控件中明明选择的是2019-05-21,但是当通过vue的调试器查看的时候，竟然是这样的     写法如下 <FormItem label="开始时间" prop...
iview2.0 日期选择器DatePicker 所选时间格式不对
bairong5174的博客
08-05 1106
网上有很多解决方式，大部分都是加个@on-change事件。比如下图： 但是如果是编辑的时候，打开编辑页面，通过数据库返回时间显示出来是对的，但是不触发change事件，直接点保存的话，保存后还是少8小时。这是我发现的bug。 然后我只能靠js解决了。下面贴出js方法： dateUtil.js export default { getDateByDatePi...
基于iview2.版本的iview_datePivker.zip
08-12
`iView` 是一个基于 Vue.js 的高质量 UI 组件库，它提供了丰富的界面元素和功能，为开发者提供了便捷的开发体验。在这个特定的场景中，我们关注的是 `iView` 的日期选择组件 `DatePicker`，特别是针对2.0版本的定制...
iView中的DatePicker日期选择控件（开始时间和结束时间约束，结束时间加一天）
G_X73的博客
06-29 2190
iView中的DatePicker日期选择控件（开始时间和结束时间约束） 前言：最近做项目需要用到日期选择控件，来做个总结，其中包括开始时间和结束时间的约束，直接上代码（Vue项目） 实现效果图： template： <span class="item"> 检测时间： <DatePicker type="date" :options="startTimeOptions" @on-change="startTimeChange" placeholde
iview DatePicker format
weixin_52422676的博客
03-21 213
而绑定时候要通过onchange事件去赋值。format只是用于时间回显时候格式的规定。
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
10-18
本文通过实例代码给大家介绍了Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能,需要的朋友可以参考下
Vue iView DatePicker时间组件踩坑
weixin_44794123的博客
06-28 2128
iView时间组件：DatePicker封装使用
VUE iview date-picker取时间范围...
weixin_33826609的博客
11-12 760
x HTML &lt;script src="//unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;script src="//unpkg.com/iview/dist/iview.min.js"&gt;&lt;/script&gt; &lt;div id="app"&gt; &lt;row&g
iview ＜DatePicker type=“date“ format=“yyyy-MM-dd“＞＜/DatePicker＞及＜Cascader/＞回显校验不通过问题
fdyputi的博客
05-24 476
view design 时间及级联选择器校验
Iview时间选择器(datepicker)按格式需求返回数据的方法
weixin_34247155的博客
06-16 3422
其实并不复杂，首先在datepicker组件按自身需求定义format属性，属性表如下： 具体请浏览https://www.iviewui.com/compo... 例如我们需要如下格式的时间数据返回：2018-06-16 19:44:55我们需要在组件上定义format <DatePicker format="yyyy-MM-d...
iview DatePicker 格式化问题
weixin_42255427的博客
03-10 3439
iview中提供的组件十分实用 其中的DatePicker组件，在不做任何数据处理是传输到后端的数据不符合业务需求，如： 用户点击选则2020-03-01~2020-03-04，参数到达后台后经过后台的格式化会变成2020-02-29~2020-03-03 java可以堆日期进行处理，但是这种格式化的东西还是现在前端处理完 做法/示例代码： <DatePicker format="yyyy-...
iview DatePicker组件
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
07-25 623
<DatePicker type="daterange" :start-date="new Date(1991, 4, 14)" :options="optionsWeek" placement="bottom-start" placeholder="填选时间" v-model="formValidate_week.date" style="width: 200px;z-index: 10...
Vue iView时间组件DatePicker，设置开始时间和结束时间约束、初始值和格式（年月日）
qq_36649922的博客
05-31 3766
html代码： <FormItem label="开始时间"> <DatePicker type="date" :options="startOption" v-model="createForm.startDate" ></DatePicker> </FormItem> <FormItem label="结束时间"> <DatePicker
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值