关于使用Antd中的DatePicker出现的日期格式转化问题(Dayjs和Momentjs)

2023-05-16

在测试过程中发现了一个比较有意思的bug问题,我们使用的是antd中的DatePicker组件,当时间选择框存在已经设定的初始值后,点击时间选择框直接报错,但是当清除内容或者处于新建没有默认值的情况下,组件可以正常运行。
(以下是使用的时间范围组件展示)
在这里插入图片描述
(以下是报错信息)
在这里插入图片描述
我们在项目中使用的dayjs替换moment,原因在于moment体积太大了,而我们只需要使用其中的一些比较简单的功能,所以选择了更加轻量级的时间库。

按照antd官方提供的替换moment.js的方法

https://ant.design/docs/react/replace-moment-cn#DatePicker

创建自定义时间组件
经过测试通过这种方式导出时间组件后,调用时使用dayjs不会出现报错信息,并且功能可以正常使用

// 以DatePicker组件为例,因为项目中目前只用到了DatePicker组件的缘故
// src/components/DatePicker.tsx

import { Dayjs } from 'dayjs';
import dayjsGenerateConfig from 'rc-picker/es/generate/dayjs';
import generatePicker from 'antd/es/date-picker/generatePicker';
import 'antd/es/date-picker/style/index';

const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);

export default DatePicker;

但是会存在原先的中文格式转变成了英文的格式,目前还没有找到可以修改这个单独组件中英文的方式(尝试单独引入中文并且在组件中添加locale没有起作用,并且全局设定的locale对自定义导出的这个时间组件也不起作用)
(使用自定义组件前)
在这里插入图片描述
(使用自定义组件后)
在这里插入图片描述
(所以如果对于中英文显示的问题不是很关心,可以使用该方法进行替换)

antd-dayjs-webpack-plugin插件引入
只需要安装依赖后,在webpack配置中添加相关的插件即可

// webpack-config.js
import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin';

module.exports = {
  // ...
  plugins: [new AntdDayjsWebpackPlugin()],
};

这种方法实现起来很简单,但是就目前来看,实际的使用并不能解决点击后报错的问题,在非TS项目中应该是有效果的(具体未测试),但是在项目中引入了TS之后,我添加了依赖以及webpack配置后,依旧是原先的报错,插件的引入并没有起到效果,所以这个方案可能不如第一种

自定义导出dayjs
这个方式之所以放在最后,是因为这个并不是官方提供的解决方案,而是在官方issue中,相关问题下面有人提供的一个解决思路,并且在使用过后发现可以完美的解决第一种因为自定义导出而造成的中英文转换问题,并且相比于第一种自定义导出DatePicker组件的方式,这种方法更加的简单方便,所以我个人非常推荐使用这种方法来解决我们的问题。

issue问题链接
(解决方案,可以看到这个解决方案受到了非常多的认可!)
在这里插入图片描述

// src/components/dayjs
import dayjs from 'dayjs';
import weekday from 'dayjs/plugin/weekday';
import localeData from 'dayjs/plugin/localeData';

dayjs.extend(weekday);
dayjs.extend(localeData);

export default dayjs;


// 其他组件文件中(@已经进行过配置,默认定位到项目中的src目录)
import dayjs from '@/components/dayjs';

(中英文显示问题以及点击报错都已解决)
在这里插入图片描述
最后:
关于具体造成问题的原因,从issue下面的回复有人提到是因为在node_modules中存在了两个dayjs,一个是原本通过npm或yarn引入的dayjs依赖,另一个存在于rc-picker中的依赖(也就是antd引入的时间相关的组件模块),但是看了官方修复也只是把原先引入的固定版本的dayjs转变成了一个更加广泛的1.x版本,并没有删除这个依赖,所以目前还不是很清楚出现这个问题的根本原因(继续探索中。。。)

issue: form.setFieldsValue 之后再去选择日期 出错clone.weekday is not a function #26190
在这里插入图片描述在这里插入图片描述
(不知道更新了antd-dayjs-webpack-plugin插件后是否起作用,因为项目中目前的antd版本是4.16.13,所以这个方案没有尝试)

在这里插入图片描述
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

关于使用Antd中的DatePicker出现的日期格式转化问题(Dayjs和Momentjs) 的相关文章

  • vs本地调试dll文件

    遇到一些问题 xff0c 需要调试dll文件进行调试 xff0c 环境配置如下 打开dll工程 1 鼠标右键dll项目 xff0c 属性 gt 配置属性 gt 调试 gt 命令 在命令中填写使用dll的 exe文件的路经 2 将新生成的dl
  • 对抗样本简介

    一 什么是对抗样本 对抗样本是一类被恶意设计来攻击机器学习模型的样本 它们与真实样本的区别几乎无法用肉眼分辨 xff0c 但是却会导致模型进行错误的判断 对抗样本的存在会使得深度学习在安全敏感性领域的应用收到威胁 如下图所示 xff0c 通
  • QT——QWidget窗体设置背景颜色、背景图、及其注意点

    QWidget窗体设置背景颜色 背景图 及其注意点 前言一 使用调色板QPalette来设置图片二 使用样式表QSS三 使用画笔Qpainter在paintEvent事件中绘制图片 前言 QT设置背景图笔录 一 使用调色板QPalette来
  • Navicat 连接Mysql 8.0以上版本报错1251的详细解决方案(配效果图)

    从MySql5 7版本跳到了Mysql 8 0的版本 xff0c 安装的时候提示链接加密方式已经改变 xff0c 是选择5 xff1f 时代的方式还是新的方式 xff0c 当时 全部选择默认 xff0c 所以选择的新的 加密方式 xff0c
  • 前端入门篇(一)常用五大浏览器及浏览器内核

    一 常见浏览器内核介绍 浏览器是网页运行的平台 xff0c 常见的浏览器有 IE 火狐 xff08 Firefox xff09 谷歌 xff08 Chrome xff09 Safari和Opera等 xff0c 我们平时称为五大浏览器 xf
  • 从输入URL到页面展示这中间发生了什么

    文章目录 从输入URL到页面展示这中间发生了什么Chrome多进程浏览器架构补充1 xff1a 进程和线程 整体的流程1 浏览器接收到输入的URL后 xff0c 先解析URL浏览器发送请求前 xff0c 尝试缓存命中 2 建立URL请求DN
  • 自动化标注技术

    自 动 化 标 注 技 术 自动化标注技术
  • 解决hadoop无法访问8088和19888端口的问题

    50070端口可以访问 xff0c 但是8088和19888端口不可以访问 xff0c 关防火墙 xff0c 看配置文件都是没有问题 xff0c 但就是不能web访问 看下图我的19888和8088前面都是127 0 0 1 xff0c 着
  • PyQt5有关QtWebEngineWidgets的解决办法

    from PyQt5 import QtWebKitWidgets ImportError DLL load failed 找不到指定的程序 这是因为PyQt5在5 6版本以后改用 QtWebEngineWidgets xff0c 所以之前
  • 在NER任务中CRF层的作用(例子)

    这里不过多阐述NER任务是啥了 xff0c 具体来看看他的作用 xff0c 并且举了一个例子 xff0c 让大家理解更加深刻 上图说明模型的输出是每个标签的分数 例如 xff0c 对于w0 模型的输出为1 5 B Person 0 9 I
  • 深度神经网络(DNN)通俗理解

    首先要明白俩个函数 xff0c 特别重要的俩个函数 线性的关系函数 激活函数 xff08 顾名思义是激活用的把得到的Z放入函数中 xff0c 来重新得到结果 xff09 中间的线相当于线性关系函数中的w 神经元相当于一个激活函数 xff0c
  • 爬虫写一个 “搜索引擎”,炒鸡简单。

    写搜索引擎前 xff0c 我们需要简答了解一下flask 这个轻量级的web的框架 xff0c 如果没有这个模块 只需要 pip install flask 即可 然后我们需要用html写一个最初的 搜索框 xff0c 并且命名这个文件为s
  • K-means聚类算法 伪代码 python3代码

    K means 算法及其代码 K means算法介绍K means 伪代码K means python 代码 K means算法介绍 链接 模式识别 聚类分析 K means 伪代码 计算两个点之间的欧式距离 span class toke
  • 模式识别—判别函数分类法(几何分类法)

    目录 统计模式识别之判别分析判别函数定义解释样例 判断函数正负值的确定确定判别函数的两个因素 线性判别函数一般形式性质两类情况多类情况 小结 广义线性判别函数目的 线性判别函数的几何性质模式空间与超平面概念讨论小结 权空间与权向量解概念线性
  • 【脚本】echo 输出赋值给变量

    链接 xff1a http zhidao baidu com link url 61 FMhso6Hf4eeRQN7p2qqzLOBAYPwh6yMJCWOvgmBFTDYWAEZ9ceuREtWhggxtcYG1iBhaJgqrcU7ad
  • 联邦学习 - 基础知识+白皮书+杨强教授讲座总结+同态加密+ 差分隐私

    联邦学习 兴起原因概念分类横向联邦学习纵向联邦学习联邦迁移学习 优势系统架构联邦学习与现有研究的区别联邦学习与差分隐私理论的区别联邦学习与分布式机器学习的区别联邦学习与联邦数据库的关系 联邦学习的最新发展及应用 xff08 2019第四届全
  • boomlab 实验 炸弹实验 系统级程序设计 CMU

    MENU boomlab还有30s到达实验1Step1 反汇编vim大法检查boom原因gdb调试出结果examinequit 实验二分析汇编语言ENDING 实验三答案 实验四func4 实验五实验六gdb调试 答案汇总ENDING问题解
  • CSAPP Lab:attacklab

    大小尾端 首先关于这个 xff0c 我一直没记清楚 xff0c 所以做个总结 xff1a 在裘宗燕翻译的 程序设计实践 里 xff0c 这对术语并没有翻译为 大端 和小端 xff0c 而是 高尾端 和 低尾端 xff0c 这就好理解了 xf
  • Advances and Open Problems in Federated Learning 总结翻译

    摘要 联邦学习 FL 是一种机器学习设置 xff0c 在这种设置中 xff0c 许多客户 例如移动设备或整个组织 在中央服务 器 例如服务提供商 的协调下协作地训练模型 xff0c 同时保持训练数据分散 FL体现了集中数据收集和最 小化的原
  • Multi-Center Federated Learning

    Multi Center Federated Learning Motivation 现有的联合学习方法通常采用单个全局模型来通过汇总其梯度来捕获所有用户的共享知识 xff0c 而不管其数据分布之间的差异如何 但是 xff0c 由于用户行为

随机推荐

  • No Fear of Heterogeneity: Classifier Calibration for Federated Learning with Non-IID Data

    No Fear of Heterogeneity Classifier Calibration for Federated Learning with Non IID Data Existing Methods for non IID da
  • Three scenarios for continual learning

    Three scenarios for continual learning Standard artificial neural networks suffer from the well known issue of catastrop
  • MQ2烟雾传感器

    1 MQ 2气体传感器所使用的气敏材料是在清洁空气中电导率较低的二氧化锡 SnO2 当传感器所处环境中存在可燃气体时 xff0c 传感器的电导率随空气中可燃气体浓度的增加而增大 使用简单的电路即可将电导率的变化转换为与该气体浓度相对应的输出
  • alembic

    alembic是sqlalchemy的作者开发的 用来做ORM模型与数据库的迁移与映射 alembic使用方式跟git有点了类似 xff0c 表现在两个方面 xff0c 第一个 xff0c alembic的所有命令都是以alembic开头
  • VScode远程免密登录

    安装配置python环境 xff1a 用VScode配置Python开发环境 xiaoj wang 博客园 cnblogs com VScode免密登录远程服务器 VS code ssh免密登陆 1 xff09 windows 下 xff0
  • linux虚拟机和主机能相互ping通,linux却不能访问外网

    linux虚拟机和主机能相互ping通 xff0c linux却不能访问外网 下面是试错过程 修改ifcfg eth0 xff08 名字可能不一样 xff09 vi etc sysconfig network scripts ifcfg e
  • 树莓派:树莓派的各个引脚

    由于第一次接触树莓派 xff0c xff0c xff0c emmmm xff0c 仔细写 xff0c 奥里给 3 3V 5V xff08 VCC xff09 xff1a 显然是电源正极啦 GND xff1a 接地用 xff0c 负极负极负极
  • 不分类工具:sd卡格式化工具安装教程

    下载地址 xff1a https www sdcard org downloads formatter 4 eula windows 进入上面这个链接 xff0c 你会看到满上面都是字 xff0c 有一个download xff0c 点完还
  • 不分类工具:Win32 DiskImager安装教程

    下载地址 xff1a http sourceforge net projects win32diskimager 这个也是很普普通通的下载安装 1 直接 download 2 双击安装文件 xff0c 弹出如下框 xff0c 选择我同意 x
  • Meta-Learning: Learning to Learn Fast

    Meta Learning Learning to Learn Fast 元学习 学习如何学习 译 原文 本文与原文基本没有区别 xff0c 仅供个人学习记录 电子笔记本 前言 xff1a 元学习解决 xff1a 遇到没有见过的任务 xff
  • 解决 Docker 容器时间与本地时间不一致的问题

    Linux 通过 Date 命令查看系统时间 xff0c 得到如下结果 xff1a root 64 iZ8vbg6m7f5ntzibw3t4huZ date Mon Aug 26 12 24 58 CST 2019 但是在 Docker 容
  • 记录ssh 和vnc命令

    ssh windows是客户端 linux是服务端 在windows powershell 输入 ssh rikirobot 64 192 168 x xxx xff08 ip地址 xff09 VNC Viewer 参考文章 xff1a 1
  • Redux源码解析(部分)

    相信用过React的小伙伴对于Redux一定不陌生 xff0c A Predictable State Container for JS Apps xff0c 这是官方文档对于Redux的定义 xff0c 即一款适用于JS Apps的可预测
  • Axios源码解析(部分)

    从 Github 上把 Axios 项目的 master 分支拷贝到本地 xff0c 用编辑器打开项目目录 首先我们先解析一下整个 Axios 项目的一些关键的文件结构 对照项目的文件目录 xff0c 梳理一下其中的一些关键文件夹以及它的作
  • 解析Javacript的事件循环机制

    前言 作为最受欢迎的Web编程语言 xff0c Javascript的单线程执行是其一大特点 xff0c 也就是说在同一时间只能有一个任务处于执行状态 xff0c 而后续的任务需要等待当前任务处理完毕后才能继续处理 xff0c 而在当前编程
  • 关于项目打包相关的优化问题

    本文主要是针对项目在打包过程中使用的一些Webpack相关的打包手段 1 首先在真正处理我们的打包之前 xff0c 我们可以通过安装插件来具体查看一下我们目前项目中的打包模块以及打包时间 打包后各个模块的可视化工具 webpack bund
  • 英语词汇、短语、语句积累

    rules of thumb 经验法则
  • 关于Webpack plugins插件的两种写法

    类写法以及require方式引入 span class token keyword class span span class token class name HelloWorld span span class token punctu
  • 关于mini-css-extract-plugin在使用过程中出现冲突的问题

    今天在优化打包的过程中 xff0c 运行npm run build后 xff0c 总是会出现冲突的警告信息 xff0c 而且对于我的这个项目而言出现了几十条的冲突提示 如下 问题排查 首先我以为可能是由于我新引入的优化方面的插件导致了原先的
  • 关于使用Antd中的DatePicker出现的日期格式转化问题(Dayjs和Momentjs)

    在测试过程中发现了一个比较有意思的bug问题 xff0c 我们使用的是antd中的DatePicker组件 xff0c 当时间选择框存在已经设定的初始值后 xff0c 点击时间选择框直接报错 xff0c 但是当清除内容或者处于新建没有默认值