antd版本升级DatePicker缺省值由undefined变为null

已于 2022-01-22 19:03:07 修改
阅读量533 收藏
点赞数
分类专栏： 问题记录 文章标签： reactjs
于 2021-05-24 18:07:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gkf6104/article/details/117228800
版权

antd版本升级DatePicker缺省值由undefined变为null

问题描述

项目中antd版本升级，DatePicker的onChange的date值类型变化
3.25.2版本 缺省值为undefined
在这里插入图片描述

升级3.26.3或着4.XX版本后

各事件或的类型为null

处理方式

好的处理方式：

需要更改业务代码中所有默认缺省值，代码改动较大；

比较小的影响改动-只更改clear操作相关的

当操作clear时，需要业务代码中处理兼容判断
在这里插入图片描述
在这里插入图片描述

糯米麻糖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd-DatePicker组件获取时间值,及相关设置方式
01-21
DatePicker组件默认语言是英语，需要设置为中文的话，需要安装moment。 import moment from “moment”; import “moment/locale/zh-cn” format属性，设置日期的格式，如“2020-02-28”。 设置日期 选择日期是...
antd的Form.Item中存在多个与运算符时，提交表单获取到的值为undefined的问题
lancun_web的博客
12-28 2380
错误的写法： <Form.Item name={name} label={label}> {type === 'input' && ( <Input style={{ width: '200px' }} placeholder={placeholder} /> )} {type === 'singleDay' && ( <DatePicker style={{ width: '200px' }} placeh
antdesign的时间date出现Invalid
最新发布
懒羊羊懒羊羊
08-10 1266
【代码】antdesign的时间date出现Invalid。
趣-关于undefined的问题
weCat_s的博客
07-04 437
undefined 懂了嗎
Antd DatePicker Invalid date问题
yue200403的博客
09-01 6055
1.问题类型一：填了日期后，点击日期后的叉号后，变成如上图。 <DatePicker value={sourceData.m == undefined ? null : moment(sourceData.m, dateFormat)} format={dateFormat} onChange={(dataString) => changeInput(dataString != null ? moment(dataString).format(dateFormat) : dataStr...
踩坑 antd Form表单获取input默认值失败，Form表单校验input 必填 默认值为undefined
github_54195343的博客
05-09 4460
问题描述：1，跳转页面后，通过url传参，将参数自动回填到下一个页面的input输入框里，打开页面后，input成功显示回写内容。2，为FormItem添加必填校验required:true。3，提交表单，校验未通过，提示input未填写内容，手动输入则校验成功。 代码如下： 问题在于，rules进行校验的时候，拿到的input value是undefined，如果把rules的校验规则写成自定义的函数，打印value则能直观的看到值为：undefined。 思路：默认值是Input输入框的，除非
解决antd datepicker 获取时间默认少8个小时的问题
01-18
1、扩展日期格式化方法 Date.prototype.format = function (fmt) { let o = { M+: this.getMonth() + 1, //月份 d+: this.getDate(), //日 h+: this.getHours(), //小时 m+: this.getMinutes(), //分 ...
Antd中单个DatePicker限定时间输入范围操作
01-21
1、某个时间段 import React from 'react'; import moment from 'moment'; class DateDemo extends React.Component{ disabledDate = (current) => { ... console.log(date,'date即为DatePicker选中的时间'); }
from-antd-datepicker:包装antd日期组件
05-06
npm install --save from-antd-datepicker 用法 import * as React from "react" ; import SingleDatePicker , { RangePicker } from "from-antd-datepicker" ; class Example extends React . Component { render ...
codemod-v4:用于antd v4升级的codemod cli
05-07
English |蚂蚁设计v4 Codemod 一组可帮助使用升级antd v4的codemod脚本。（受启发）用法在运行codemod脚本之前，最好确保首先提交本地git更改。 # global installationnpm i -g @ant-design/codemod-v4# or for yarn...
初始化项目时，遇到Antd is not defined
BiuBiu_Ka
12-17 576
原因是按网上的教程配置在线主题时，安装了babel-plugin-import,并且修改了babel.config.js的内容，所以会有错误； 解决方案 1. 在main.js引入ant-design-vue时改为如下引入： import Antd from 'ant-design-vue' 2. 移除babel.config.js文件中的如下代码 plugins: [ [ 'import', { libraryName: 'ant-design-vue'
element-ui表单验证，value一直为undefined的一种可能解决方案
HermitSun的博客
04-18 1万+
有很多人遇到过这个问题，但是一般都是因为prop没写对，或者没有在data里声明；但我遇到的情况这两者都不是。代码如下： <template> <el-form :rules="rules"> <el-form-item prop="value"> <el-input v-model="form.value"/> &l...
关于使用Antd中的DatePicker出现的日期格式转化问题(Dayjs和Momentjs)
qq_41453709的博客
03-18 1万+
在测试过程中发现了一个比较有意思的bug问题，我们使用的是antd中的DatePicker组件，当时间选择框存在已经设定的初始值后，点击时间选择框直接报错，但是当清除内容或者处于新建没有默认值的情况下，组件可以正常运行。 (以下是使用的时间范围组件展示)
react 组件内的值为 undefined 时，做了判断依旧报错
sw_onload的博客
05-20 1689
其中currentCreative.adcreative_elements是存在的，只是值为空的{},明明做了判断为什么还是报错？
ant design vue input-number验证信息一直提示验证不了
li222248的博客
11-08 1013
验证时会报这个错误，不是有效的类型名称 只需要加个类型就行了
Antd Datepicker设置默认值不生效
wangzhe123_的博客
09-07 5231
react+antd的项目。 没有使用Form表单，只是单独使用了DatePicker组件，前期想的是，根据接口返回的日期数据，如果有值就将DatePicker的defaultValue的值设置为接口的数据，否则的话展示当前日期，我在DatePicker标签内使用了三元判断： const [Info,setInfo] = useState({}); <DatePicker defaultValue={Info.time === null ? moment() : Info.time } forma
解决antd Cannot read property 'validate' of undefined
热门推荐
让优秀成为一种习惯
08-09 1万+
使用React+antd开发，本地使用新建表单Form的Input没什么问题，但是，打包到服务器上之后，在输入框输入值后报错，Cannot read property ‘validate’ of undefined。
antd Table的record为undefined？
比起未来可期，我更喜欢如约而至
07-14 1528
问题描述 需要通过antd Table一行中的操作，获取一行数据的详情，但是打印出来的record为undefined render: (record) => ( <div> <Tooltip title='详情'> <a onClick={() => this.handleInfo(record)}>
antd datepicker获取值
04-28
Ant Design是一款基于React的UI组件库，其中的DatePicker组件可以用于日期选择。获取DatePicker组件的值可以通过onChange事件进行监听，当用户选择日期时会触发该事件。在onChange事件中可以获取到选择的日期值，然后进行相应的处理。 例如，使用Ant Design的DatePicker组件，可以如下定义： ```jsx import React, { useState } from 'react'; import { DatePicker } from 'antd'; function App() { const [selectedDate, setSelectedDate] = useState(''); const handleDateChange = (date) => { setSelectedDate(date.format('YYYY-MM-DD')); // 格式化日期 }; return ( <div> <DatePicker onChange={handleDateChange} /> <p>选择的日期为:{selectedDate}</p> </div> ); } export default App; ``` 在这段代码中，我们定义了一个App组件，在组件中定义了一个state来保存用户选择的日期，这个状态值会被展示在p标签中。在DatePicker组件中，我们监听了onChange事件，并通过handleDateChange函数来更新selectedDate状态值。其中，我们使用了moment.js库来格式化日期。最后，将DatePicker组件和展示日期的p标签放在div中，即可得到一个简单的日期选择器。 总之，通过监听DatePicker组件的onChange事件，可以获取到用户选择的日期值。根据实际需求来对日期值进行处理即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值