vue+iview写一个日期选择器

Logan星

已于 2022-05-25 21:06:10 修改

阅读量746

点赞数

分类专栏：笔记文章标签： vue.js 前端 javascript

于 2022-05-09 16:30:52 首次发布

本文链接：https://blog.csdn.net/qq_45222558/article/details/124668650

版权

本文介绍了如何在Vue+IView项目中处理DatePicker组件的选择结果，以确保数据能正确存入数据库。通过在日期选择器上添加@on-change事件，并配合方法处理日期格式，确保数据库字段类型为date。

摘要由CSDN通过智能技术生成

我们都知道官网给出的代码是这样。

<DatePicker type=“date” placeholder=“Select date”
v-model=“formItem.date” <DatePicker>

但其实这样拿到的数据并不能进库，所以我们要对他进行处理，可以使用@on-change=“formItem.startDate= $event”，比如说这样：

  <FormItem label="开始日期:"
            prop="startDate" style="width: 300px">
   <DatePicker :value="formItem.st

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Logan星

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

使用vue+iview写一个联级选择

m0_66334873的博客

01-12

694

使用iview的Cascader 级联选择报错：Error in callback for watcher "data": "TypeError: cannot read properties of undefined (reading 'length')"

用Vue + iview 写一个级联选择

cosmos16的博客

02-23

870

iview的级联选择是这样的，要是想要实现那我的数据格式应该也要跟这个差不多。把所有的例子都看了一遍也没发现有多选的，也没有可实现的属性或者方法。他都封装好了也改不了他的方法，改了半天我放弃了。首先嘛去搜了一波看看大家都用的什么写的，看了一圈没有完全满足我的需求的（应该是有的，只是我看的都是开源的），但是给了思路。这是最终的样子。我需求的时间范围是2020年至今，可按月份查询或者按季度查询，月份和季度不可同时选择，选择月份后可选择具体月份，季度类似。最终的需求还是改成了单选的，但是我懒的换ivie

参与评论您还未登录，请先登录后发表或查看评论

iview3-date-range:iview的日期选择控件，做了日期范围的限制，可自定义可选的间隔2个与、3个月等

04-10

vue-iview-ui 命令 yarn build rollup -c 使用 DateRange 组件目录 demo 使用方法 src 组件源码 dist 打包出来，可以直接使用的文件

vue+iview实现日历日期选择（多月份多选）

LBJSagiri的博客

06-08

1924

选择本年某月某天（可多选不同月份，不同日期）

iview Datepicker日期时间选择器,设置结束时间比开始时间多23:59:59

weixin_47239395的博客

04-27

1058

啰啰嗦嗦的序言: vue iview项目,PC内管系统,搜索条件有开始结束两个时间输入框,有默认值,结束时间比开始时间多差不多24小时效果: <template> <Form :model='formInLine' :label-width='90' inline> <FormItem label='开始时间'> <DatePicker type='datetime' v-model='formInLine.startTime

iview中日期选择器DatePicker- - 限制选择年份范围

slient033的博客

09-16

2581

iview中日期选择器DatePicker- - 限制选择年份范围

iview 时间日期选择器限制开始时间不能小于当前系统日期时间，结束时间不能小于开始时间和当前系统日期时间时间

m0_65709345的博客

10-04

933

废话不多说直接上代码。

vue+iview地址选择器

08-07

Vue+IView地址选择器是一个基于Vue.js框架和IView UI库实现的高效、便捷的地址选择组件。这个组件提供了全国范围内的省市区三级联动选择功能，并且特别加入了华东、华北等大区的选择，使得用户在操作时可以更加直观...

VUE+IVIEW的视光系统

11-08

"VUE+IVIEW的视光系统"这个项目显然使用Vue.js作为前端框架，结合IView进行UI设计，构建了一个专门用于视光门店的管理系统。在这样的系统中，开发者可能利用Vue的组件化特性来拆分不同的功能模块，比如顾客管理、...

iview日期时间选择器---控制时间在一个月内

weixin_60652380的博客

06-01

838

控制时间在一个月内日期默认只显示七天

Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能

10-18

本文通过实例代码给大家介绍了Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能,需要的朋友可以参考下

iview+vue时间选择器组件选择范围1月

weixin_50194471的博客

04-12

618

样式中定义两个选择时间组件。

iview日期选择器更改显示日期书_iview - 设置不可选择的日期

weixin_39628247的博客

12-22

235

type="date"v-model="startTime"placeholder="请选择开始时间":options="startTimeOption"@on-change="onStartTimeChange">type="date"v-model="endTime"placeholder="请选择结束时间":options="endTimeOption"@on-change="onEn...

iview日期选择器联动开始时间结束时间设置禁用

weixin_45195355的博客

11-09

338

日期选择器

iview2 日期选择器DatePicker 所选时间比实际时间少8小时

最新发布

qq_39336120的博客

03-19

238

解决办法就是使用on-change()事件并且绑定value值（bind）,不能使用v-model(使用@on-change()之后就不能用v-model)

iview 时间选择器 选择时间段

W_ill的博客

01-06

767

let self = this return { startTimeOption: { disabledDate(date) { return date && date.valueOf() >= new Date() } }, endTimeOption: { disabledDate(date) { let rd = self.date.startTim

iviewui DatePicker 日期选择器 限制选取时间跨度

Teemo_shape的博客

04-27

2535

需求：当前日期是 2022年4月27日，要求当天后的日期不可选，选中的日期跨度是4天，比如我选13号，13号前四天后四天是可选的，其余都不可选。 vue + ivewUI <DatePicker ref="datePicker" type="daterange" @on-pick="onPick" class="ivu-ml-16" place...

iview日期组件开始时间结束时间限制三天，以及结束时间选择当天时默认当前时间，选择今天前，默认23.59分

qq_46141403的博客

10-27

1090

iview日期选择器时间限制

已解决：iview & elementui 关于datepicker日期选择器的一些注意事项，比如v-model绑定值会比选定日期少一天（实际是8小时），日期默认值表单校验无法通过等

Spy003的博客

05-08

985

直接用v-model可以绑定值，渲染页面结果日期是正确的，但是绑定的值的日期会少8小时，这个主要是他的时区处理的遗留问题，其实我认为这个问题他们很好解决，但是这么多年了，他们好像也没有想要解决的意思，iview给的建议是使用@on-change方法配合v-model使用，这样可以处理编辑时的默认值回显也可以处理新值的正确显示（不少8小时），如图iview官方文档，其实只需要处理这个少一天的问题就好了，我们最好是走一个三方库moment，用他来处理最好不过了，就在提交表单的时候处理就可以。

vue+iview 在表格中添加日期选择器

05-25

在使用iview表格中添加日期选择器，可以使用iview提供的DatePicker组件，具体步骤如下： 1. 在表格中添加列，用于显示日期选择器。 ``` ...