iview 使用日期选择日期DatePicker 进行数据传值时的问题

最新推荐文章于 2023-06-12 16:00:25 发布
最新推荐文章于 2023-06-12 16:00:25 发布
阅读量1.3k 收藏 1
点赞数
文章标签： html5 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51409660/article/details/120331603
版权

最近使用iview官方组件的 DatePicker日期选择器进行数据操作 向后台发送数据，但是一直报错是怎么回事呢

原来：

  

 原本我将DatePicker控件放在FromItem标签内，并给他v-model绑定值 ，然后axios传值

但是发送成功后 后台一直报错 说我数据格式不对

 修改：

<Form  ref="formItem" :model="formItem" :label-width="110">
      <FormItem label="开始时间：">
            <DatePicker :value="formItem.start" @on-change="handleChange" type="date" placeholder="yyyy-MM-dd" style="width:100%"></DatePicker>
      </FormItem>
</Form>

     将v-model改为  :value，添加一个on-change事件

 

 最后数据发送成功啦，撒花~

不会写代码的单人青
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
iview 的 时间date-picker 为 datetimerange 和Select为value=“ “ 的验证问题
qq_33164351的博客
08-10 516
1.iview的 Select下拉框的时候,数据验证必填,选择了数据,却一直提示验证不能通过 <Form :model="formData" ref="formValidate" :rules="ruleValidate" <FormItem label="请选择类型" prop="depttype" label-position="top"> <Select v-model="formData.depttype" value="formData.depttype"&g
iview日期控件DatePicker设置不可选择的日期、不可选时间点
pqj222的博客
07-24 7904
近期要做一个预约功能，其中预约日期是有范围限制的，预约的时间点也是按后台配置起止时间的，这就需要前端将不需要的日期和时间设置为不可选择。 效果如下： 1、日期按照后台返回，控制能选择的日期。 2、时间的话，过滤了不可选时间。 这里使用的是iview的DatePicker组件，type为datetime 日期不可选通过options属性来控制， 时间不可选通过time-picke...
iview DatePicker表单验证问题
妙蛙真香的博客
09-22 665
Vue学习-DatePicker表单验证问题
关于iview表单验证对于时间选择器没反应（出现加载图标）的问题
ljn1289532768的博客
04-11 2914
出现的问题 关于修改承接项目信息功能，从后端获取指定项目的信息显示在编辑界面，在编辑界面进行修改，点击确定后，时间选择器后面形成加载圈，但并没有报任何的错误（但并不是每次操作都是这种情况，在该界面停滞久了就会可能出现），图如下 投标日期处出现加载圈 猜测可能出现问题的原因 项目环境原因，打包时的问题 网络问题 自己的电脑原因 传过来的时间格式问题 原因验证 项目环境原因，打包时的问题 今天p...
iView - Form中想要重置DatePicker生效，必须给DatePicker绑定value属性
weixin_30593443的博客
11-30 612
Form中想要重置DatePicker生效，必须给DatePicker绑定value属性 转载于:https://www.cnblogs.com/andremao/p/7929200.html
iview表单校验必填项required时显示xxx is required，或者trigger验证不刷新问题
最新发布
george_ye的博客
06-12 1362
使用iview的form组件，表单项为必填项时遇到的问题
iview2.0 日期选择器DatePicker 所选时间格式不对
bairong5174的博客
08-05 1003
网上有很多解决方式，大部分都是加个@on-change事件。比如下图： 但是如果是编辑的时候，打开编辑页面，通过数据库返回时间显示出来是对的，但是不触发change事件，直接点保存的话，保存后还是少8小时。这是我发现的bug。 然后我只能靠js解决了。下面贴出js方法： dateUtil.js export default { getDateByDatePi...
iview日期控件,双向绑定日期格式的方法
08-27
下面小编就为大家分享一篇iview日期控件,双向绑定日期格式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端开发VUE使用iView的DatePicker 设置默认值
03-02
我们在用Vue做前端时，经常会用到iView的UI控件，比如说日期选择器就是比较常用的。官方文档都提供了源码，但未提供设置默认值的代码。所以就得我们自己开看控件说明自己编写实现。本文档就是说明怎么在使用iView 的...
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
10-18
本文通过实例代码给大家介绍了Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能,需要的朋友可以参考下
日期选择控件（可防止屏幕旋转抛出的异常）
07-13
日期选择控件（可防止屏幕旋转抛出的异常）
解决iView中时间控件选择的时间总是少一天的问题
08-27
当我们再次查看选择的日期时，iView 会将 UTC 时间转换回本地时间，这样就会出现少一天的问题。 解决方案 ------------ 要解决这个问题，我们需要使用 `@on-change` 事件来获取选择的日期，而不是使用 `v-model`。...
iview前端向后端传数据一直转圈_使用iview遇到问题记录总结
weixin_39639919的博客
12-22 582
1.iview设置日期不可用，设置开始开始时间早于结束时间//官网示例，设置今天之前不可选，但是不能识别thisdisabledDate (date) {return date && date.valueOf() < Date.now() - 86400000;}//绑定this，可设置定义好的变量optionsEndTime: {disabledDate: (functio...
iview DatePicker日期插件绑定v-modal值时 给的默认值日期是date类型问题
lyz246859的博客
05-31 445
最近在使用iview开发pc项目时，因为很久没搞pc项目了，对iview组件有点陌生，所有在使用DatePicker日期插件的时候，绑定了v-modal值，但是又在页面开始阶段赋值了默认值，导致，在采用默认值的时候提交rq参数，会是rq从yyyy-MM-dd格式变成带区时的rq,造成报错，这是因为DatePicker日期插件的默认格式是deta格式，所有在提交rq值的时候，一定要把显示用的值和提交的值区分开，避免被自动转换了日期格式。
Vue -- iview中，DatePicker日期控件类型type="datetimerange" ，表单验证validate不通过问题。
Emily
08-16 8939
解决如下： 适合所有类型的验证：daterange、datetimerange、date、datetime、year、month。 <FormItem label="任务时间：" prop="taskTime"> <DatePicker type="daterange" placeholder="开始时间-结束时间" v-model="formItem.taskTi...
vue的 DatePicker 日期选择器，把选择的日期转化成需要格式传值
祈澈菇凉
05-13 2085
vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。 推荐指数：star:62.1k Github 地址：https://github.com/PanJiaChen/vue-element-admin Demo体验：...
iview自定义表单验证
程序员柱子的博客
12-21 981
@[TOC] iview自定义表单验证 之前总结过iview简单表单验证： https://blog.csdn.net/A_LL_IS_WELL/article/details/111227468https://blog.csdn.net/A_LL_IS_WELL/article/details/111227468 后来遇到一个问题，当选择新建时表单显示为input 当选择已存在时 提供选择框供选择，为了避免新建时输入的名称与已经存在的重复，需要在input添加校验。特此记录一下，怕自己以后忘了 自定义校验
关于iview表单验证的问题
热门推荐
Amanda_wmy的博客
01-10 3万+
关于iview表单验证的问题 iview表单验证的步骤： 第一步：给 Form 设置属性 rules :rules 第二步：同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步：注意：Form标签里面是 :model 第四步：注意：在Form标签里面必须添加 ref,相当于id,在此范围内的表单验证有效 第五步：在操作保存按钮时，添加方
vue开发，iview日期选择验证
童磨
04-12 1054
vue开发，iview日期选择验证 使用iview框架进行vue开发过程中遇见的零散问题（1） rules中绑定自定义的验证规则 <Form ref="formValidate" :model="formAct" :rules="ruleValidate" :label-width="140" class="mainAct"> <FormItem label="活动时间：" prop="acttime" class="redDot"> <DatePicker typ
vue+iview 在data数据中为表格添加日期选择器
05-25
在Vue和iView中，可以使用`DatePicker`组件来实现日期选择器。首先，在`<template>`中添加一个`DatePicker`组件： ```html <DatePicker v-model="date" type="date" placeholder="选择日期"></DatePicker> ``` 然后，在`<script>`中添加一个`data`属性来存储选定的日期： ```javascript data() { return { date: '' } } ``` 接下来，将该日期添加到表格中。假设我们已经有一个表格，其中有一个日期列。我们可以将该列的`render`属性设置为一个函数，该函数返回一个包含日期选择器的对象： ```javascript columns: [ { title: '日期', key: 'date', render: (h, params) => { return h('DatePicker', { props: { value: params.row.date, type: 'date', placeholder: '选择日期' }, on: { 'on-change': (val) => { params.row.date = val } } }) } }, // 其他列... ] ``` 在这个函数中，我们使用了`h`函数来创建一个`DatePicker`组件，通过`props`属性设置组件的属性，如`value`、`type`和`placeholder`，并通过`on-change`事件监听器来更新`params.row.date`的值。最后，我们将这个`DatePicker`对象返回给`render`属性。 这样就完成了在Vue和iView中为表格添加日期选择器的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

不会写代码的单人青

耶耶耶！！！感谢你的打赏！！！

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

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

打赏作者

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

抵扣说明：

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

余额充值