Antd DatePicker Invalid date问题

这篇博客探讨了使用Ant Design DatePicker组件时遇到的问题。首先,当日期为空时,组件显示异常。解决办法是在使用moment转换格式前先判断日期是否为null。其次,DatePicker的月份和星期未能正确汉化,原因可能是未按照Antd官网的汉化指南操作,或者在使用vite时导入了错误的moment locale文件。正确的导入方式是使用`import 'moment/dist/locale/zh-cn';`来实现汉化。

开发板推荐:天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

 1.问题类型一:填了日期后,点击日期后的叉号后,变成如上图

<DatePicker value={sourceData.m == undefined ? null : moment(sourceData.m, dateFormat)} format={dateFormat} onChange={(dataString) => changeInput(dataString != null ? moment(dataString).format(dateFormat) : dataString, 'm')} />

重点是在使用moment转化格式之前先判断日期输入框的指是否为null,若为null则不进行转化。

2.DatePicker 日期选择框 月份和星期不能汉化

原因一:没按antd官网的汉化要求。

原因二:使用了vite,则引入方式应为

import 'moment/dist/locale/zh-cn';

而不是:

import 'moment/locale/zh-cn';

下面这个引的文件里面有require(' ')获取资源或文件的方式,vite不支持该写法。

开发板推荐:天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

yue200403

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明:

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

余额充值