vue3.0 ant-range-picker [antdv: DatePicker] `value` provides invalidate moment time. If you want to

最新推荐文章于 2024-07-11 16:06:59 发布
原创 最新推荐文章于 2024-07-11 16:06:59 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

在使用Ant Design的时间范围选择器时遇到错误，即使按照官方文档配置并尝试使用moment包裹仍然报错。问题根源在于日期格式不正确。通过调整日期格式设置，最终成功解决了问题。示例代码显示了正确运行的<a-range-picker>组件及其对应的datePicker.value设置。

在这里插入图片描述
写代码时候碰到一个问题
用ant的时间范围选择器报错
按照官网写的
后来用了moment包裹还是报错
最后发现是格式问题
下面是官网的写法
在这里插入图片描述

最后是我的运行没有问题的

<a-range-picker v-model:value="datePicker" />



datePicker.value =[moment().startOf('date'), moment()]
Ant Design Vue - Warning: [antdv: Table] Each record in dataSource of table should have...
🏆 前端领域优质创作者
11-29 2382
前言 表格组件报错，这由于 columns 中定义的默认 key 值在返回的数据中没有当前的这个字段造成的，一个是使用 rowKey 默认指定一个对应的键值对，或者使用类似 v-for 循环中的下标 index 来代替！ Warning: [antdv: Table] Each record in dataSource of table should have a unique `key` 解决方案 table 配置 rowKey 即可，如下所示： :rowKey="(record,index) =&gt
ant-design-vue range-picker日期范围组件 mode=“[‘year‘, ‘year‘]“时 开始和结束日期的相互禁用失效的问题
weixin_51015578的博客
08-05 3864
ant-design-vue 的 range-picker组件，设置属性 :mode="[‘year’, ‘year’]" ，设置之后：开始和结束日期的相互禁用失效了，正常的效果应该是开始日期不能大于结束日期，结束日期不能小于开始日期，正常效果如图所示 由于官方提供的disabledDate api也是失效的，不知道有没有更好的解决方式，我这里是用的原生的dom操作添加css样式 达到禁用点击事件的方式实现类似的效果 解决如下： <template> <div> &lt
[antdv: DatePicker] `value` provides invalidate moment time. If you want to set empty value, use `nu
agua001的博客
06-09 2241
warning.js?2149:7 Warning: [antdv: DatePicker] `value` provides invalidate moment time. If you want to set empty value, use `null` instead. 以上是antd表单赋值日期组件遇到的报错 解决： this.$nextTick(() => { formData = this.infoForm.getFieldsValue(); for (let i in fo.
warning.js?1db9:18 Warning: [antdv: DatePicker] `value` provides invalidate moment time. If you want
Jack, what else can you do besides holding your little darling?
08-19 232
warning.js?1db9:18 Warning: [antdv: DatePicker] `value` provides invalidate moment time. If you want
Python私教张大鹏 Vue3整合AntDesignVue之DatePicker 日期选择框
未来已来，AI时代，学AI编程，做AI量化，就来大鹏AI教育。
06-13 1408
【代码】Python私教张大鹏 Vue3整合AntDesignVue之DatePicker 日期选择框。
实战：vue3.0 ant-design table表头国际化i18n问题
qingzhen的博客
12-28 2542
<a-table :columns="columns" :dataSource="dataSource" :pagination="false" :loading="loading" :scroll="{ x: 1100, y: 300 }" > // 表头国际化设置 <template #headerCell="{ column }"> <template v-for="(item, index) in columns" :
vue ant-design a-range-picker日期格式的禁用与快速查询
weixin_37918931的博客
07-17 1776
vue ant-design a-range-picker日期格式的禁用与快速查询欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Ma
[antdv: DatePicker] `value` provides invalidate moment time. If you want set empty value，use `null`
热门推荐
cx17521000200的博客
12-15 1万+
Ant Design Vue DatePicker 报错 warning.js?2149:7 Warning: [antdv: DatePicker] `value` provides invalidate moment time. If you want to set empty value, use `null` instead. 操作，点击编辑时候，使用v-decorator的initialValue方法赋值报错 原代码 <a-date-picker style="width: 1
Warning: [antdv: DatePicker] `value` provides invalidate moment time. If you want
m0_67208941的博客
04-22 933
antdv: DatePicker
[antdv: DatePicker] value provides invalidate moment time. If you want set empty value，use null
鑫仔的博客
07-22 754
[antdv: DatePicker] value provides invalidate moment time. If you want set empty value，use null 解决步骤： 1.使用value属性 绑定方法或者计算属性 将需要绑定的值传参 ，计算属性传参的话使用闭包，这里不作展示，可自己百度 2.方法内使用moment将时间转成字符串 3.change事件内对参数进行赋值 第一个判断是为了清空时间做的处理 总结：这样子不仅不会报错 还可以拿到后端传过来的数据，进行展示，不
a-date-picker踩坑Warning: [antdv: DatePicker] value provides invalidate moment time. If you want to se
浮游的博客
12-24 9165
在Vue中datePicker的使用是比较多的，但是用到a-date-picker的时候难免会遇到一下预料之外的事情。 在设置默认值这个事情上，就给了当头一棒，设置老不成功。 踩坑 先说如何踩坑，在一般思维观念上，a-date-picker绑定一个model，然后model在初始赋值，值直接用字符串赋值，这就遇上事了。 报错：Warning: [antdv: DatePicker] value provides invalidate moment time. If you want to set empty
Warning: [antdv: DatePicker] `value` provides invalidate moment time. If you want to set empty value
前端-尔嵘
05-10 1万+
产生原因很明显，上面data中定义的绑定日期变量是一个字符类型，a-date-picker绑定的时间变量是一个string类型，而antdesignvuedatepicker默认需要moment格式，所以会报错。
默认日期；时间范围和限制Warning: [antdv: DatePicker] `value` provides invalidate moment time. If you want to
最新发布
i_am_a_div的博客
07-11 1029
Warning: [antdv: DatePicker] `value` provides invalidate moment time. If you want to set empty value, use `null` instead.
Antdv: DatePicker报错 `value` provides invalidate moment time...
Agnes_lqq的博客
12-26 2676
使用Antdv框架下的a-date-picker组件，用v-model绑定数据，然后初始化数据的时候控制台会报warning：[antdv: DatePicker] provides invalidate moment time. If you want to set empty value, use instead.页面如下： 代码如下： 一、分析原因 根据提示可知，是因为我们绑定的数据不是moment格式的数据，而v-model默认绑定的都是string类型的，所以初始化的时候会不合法1.查看Ant
vue中a-date-picker报错[antdv: DatePicker] value provides invalidate moment time. If you want to setmpty
nyf_unknow的博客
03-31 1726
项目场景： 知识产权模块 弹窗表单添加日期选择组件 问题描述 Warning: [antdv: DatePicker] value provides invalidate moment time. If you want to set empty value, use null instead.： 原因分析： a-date-picker数据模型是moment对象 ，而在data()初始的表单中的startDate默认值是" "空字符串 uploadForm: { name: '',
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值