关于使用antd-desgin-vue中的时间插件默认值显示Invalid date错误的解决办法

最新推荐文章于 2024-05-21 15:04:37 发布
转载 最新推荐文章于 2024-05-21 15:04:37 发布 · 8.8k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：https://blog.csdn.net/mlxgzz/article/details/104786004
本文分享了在使用Antd-Design-Vue框架中的a-time-picker组件时遇到的问题及解决方法。作者在尝试回显用户已填写的时间时，发现直接在mounted中赋值的方法不可行，最终通过将值初始化为null并使用v-if进行判断解决了问题。

前言:在开发过程中，使用antd-desgin-vue框架的时候，使用a-time-picker这个时间组件时遇到了一个问题，业务：需要在编辑的时候先回显用户之前已经填过的时间，这个时候我刚开始的处理逻辑就是在mounted中请求完数据之后，直接赋值就行 ，看代码在这里插入图片描述
在这里插入图片描述
错误的姿势打开就是这个样子在这里插入图片描述
解决办法就是：先将这个值赋值为null，再用v-if判断
栗子：在这里插入图片描述
在这里插入图片描述
最后 谢谢这位大哥~~~~~~!!!

vue中时间格式化moment在组件和函数中的使用以及解决Invalid date问题
qq_39111164的博客
08-25 3552
1、先使用npm命令安装moment npm install moment --save 2、在main.js文件里引用moment import moment from 'moment' Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') { return moment(dataStr).format(pattern) }) 3、使用 （1）在组件中使用 <div class="time"&gt
ntd-desgin-vue中的时间插件默认值显示Invalid date 解决办法
w161513820的博客
09-18 4535
对于ant-design的一些问题我早已经见怪不怪了，但是对下班已经遥遥在望的时候，这个问题给了我当头一棒。第一反应这是啥玩儿？ 首先看vue的生命周期当中难道是没赋值嘛，看了下没问题，然后直接去data当中赋值，发现并没有出现问题。在mounted看了下数据，分析了一下可能是先判断了data有没有数据，如果没有数据就导致报错了。解决方法就是加一个v-if判断一下就行了 这个问题就解决了，下班 ...
vue通过moment插件以及全局filter将时间戳转换成时间报错invalid date
weixin_43286206的博客
07-25 1486
极有可能是数据库返回的时间戳格式是字符串类型 将字符串转换为数字类型就可以试试了
Antd DatePicker Invalid date问题
yue200403的博客
09-01 6803
1.问题类型一：填了日期后，点击日期后的叉号后，变成如上图。 <DatePicker value={sourceData.m == undefined ? null : moment(sourceData.m, dateFormat)} format={dateFormat} onChange={(dataString) => changeInput(dataString != null ? moment(dataString).format(dateFormat) : dataStr...
解决new Date的值为Invalid Date、NaN-NaN的问题
sunlizhen的专栏
01-07 3126
// 操作时间转换 getFormatDate(row, column, cellValue) { var date = new Date(cellValue);// 时间戳为10位需*1000，时间戳为13位的话不需乘1000 var Y = date.getFullYear() + '-'; var M = (date.getMonth() + 1 < 10 ? '0' +...
antdesign的时间date出现Invalid
懒羊羊懒羊羊
08-10 1818
【代码】antdesign的时间date出现Invalid。
Ant Design a-time-picker 时间回显问题 回显为Invalid date(使用moment来处理)
weixin_43962877的博客
05-21 982
【代码】Ant Design a-time-picker 时间回显问题 回显为Invalid date(使用moment来处理)
ant-design-vue TimePicker 时间选择框 踩坑
mlxgzz的博客
03-10 7271
笔者在一次开发中用到TimePicker 时间选择框组件。 要求是有默认值，就是从接口中返回的数据，但是TimePicker数据在一次加载后便不会更新 简单的说，如果在data里设置了default=null TimePicker就会就会显示Invalid date，default=“9：00：00”，就会显示9：00：00 最后解决方法是data里设置了default=null，在time...
moment转化时间戳出现Invalid Date
Cherry
02-26 8390
项目用在使用moment转换时间戳的时候出现Invalid Date 通过后端接口发现接口返回的字段是 beginTime: “1612922019029” 在数据传递得过程中类型发生了变化 所以得把字符串用Number()转化下数字类型即可正常显示 // 转换数字类型 beginTime: this.$moment(Number(item.beginTime)).format( "YYYY-MM-DD" ), 还有个小问题就是如果某个时间戳为空是时，则会显示1970-01-01 所以为了防止显示
Element TimePicker 时间选择器 回显问题Invalid data
JxiaoZhang的博客
03-04 1万+
今天使用element ui中回显时一直2-01-01类似于这种无效的时间，后来发现是因为使用new Data处理后端返回过来的数据的时候： 如果字符串为空，就会出现Invalid data。 在不能保证时间一定有值的情况下，前端就需要对接收过来的数据进行处理。 因为用的地方比较多我就把它封装到了一个文件中，所有的组件用到的直接引用方法即可： /** * 处理时间 * @param ...
JS中Date日期Invalid Date报错问题解决方法
热门推荐
smallteddy.blog.csdn.net
01-04 2万+
使用new Date(time)或者moment(time)时，有时会出现Invalid Date报错。 这是因为转化的时间戳要求13位，而后端有时会返回10位。 所以这里要处理一下时间戳。 new Date(1000 * time) moment(1000 * time)
a-time-picker 时间回显问题 , `value` provides invalidate moment time
LavaStrom
07-09 2128
a-time-picker 时间回显问题 Warning: [antdv: DatePicker] value provides invalidate moment time. If you want to set empty value, use null instead. ant design vue中 时间选择器，需要使用到moment 安装moment 组件 引入moment 组件 回显的时候进行moment处理 （一）安装moment 组件 ```html npm install
JS时间Invalid Date问题解决
weixin_67434908的博客
03-28 1819
h5网页能正常显示，但是在微信小程序是提示Invalid Date，原因是因为我们不能写\xa0。写项目的时候遇到这个报错，直接换成" "就好了。
基于Vue.js的ElementUI
落日的博客
04-08 601
一、ElementUI (介绍) 官网地址 http://element-cn.eleme.io/#/zh-CN 让页面设计变得简单，快速开发 <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-...
React-antd日期选择框日期初始化问题(invalid date)解决
WebView
04-09 1万+
1、 2、在使用日期选择框的时候，当我们没有进行初始化，并格式化日期时，会出现以下情况 3、解决方法: 在state初始化时给予日期值为undefined 在日期选择框中进行判断 <DatePicker style={{ width: '110px' }} placeholder="开始日...
关于时间（日期）选择器的回显问题
风语的博客
03-03 6941
我在vue项目里用到了ant design vue 的时间选择器组件a-date-picker和a-time-picker组件，因为需要回显，一开始的时候碰到了问题，感觉有点费时间，就先跟后端调接口，回过头来在解决这个问题。 现在进入正题，代码附上。 <a-date-picker :value="moment(windowIndate, 'YYYY-MM-DD')" :defaultVa...
vue中a-date-picker报错[antdv: DatePicker] value provides invalidate moment time. If you want to setmpty
nyf_unknow的博客
03-31 1746
项目场景： 知识产权模块 弹窗表单添加日期选择组件 问题描述 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: '',
ant-design-vue中a-date-picker 日期选择器校验不灵及禁止选择今天之前/之后的日期
浮游的博客
02-24 9718
ant-design-vue中a-date-picker 日期选择器校验不灵的问题 <a-form-model-item label="考试日期" prop="date" :rules="{required: true,message: '必填项',trigger: ['blur']}"> <a-date-picker :disabled="disabled" class="w100" :disabledDate ="disabledDate" v-model="timeInfo.
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值