在使用antd做form表单提交的时候,突然发现了一个很有意思的bug.就是在使用datepicker组件日期框的时候会出现提交后少一天的问题
我在网上搜索了许多解决办法,也是困扰了我一天的时间,下面代码.
|
1
2
3
4
5
6
7
8
9
10
11
|
let
formData = JSON.parse(JSON.stringify(form.getFieldsValue()));
// console.log(formData);
// console.log(formData.Date1);
// console.log(moment(formData.Date1));<br>
// console.log(new Date(formData.Date1));
//debugger;
formData.Date1=
new
Date(formData.quotationDate).format(
"yyyy-MM-dd hh:mm:ss"
);
formData.Date2 =
new
Date(formData.quotationInfoDate).format(
"yyyy-MM-dd hh:mm:ss"
);
|
在log输出的时候,上面三种方法均不行,new Date的方法虽然可以,但是再提交之后就不行了,提交的数据也会自动减少八个小时,最终找到解决办法,在后面加上format,重新渲染格式
最后在下面加上这个,在提交的时候就不会出现日期减少的问题了
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
Date.prototype.format = function (fmt) {
let
o = {
"M+"
:
this
.getMonth() + 1,
//月份
"d+"
:
this
.getDate(),
//日
"h+"
:
this
.getHours(),
//小时
"m+"
:
this
.getMinutes(),
//分
"s+"
:
this
.getSeconds(),
//秒
"q+"
: Math.floor((
this
.getMonth() + 3) / 3),
//季度
"S"
:
this
.getMilliseconds()
//毫秒
};
if
(/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (
this
.getFullYear() +
""
).substr(4 - RegExp.$1.length));
}
for
(
let
k
in
o) {
if
(
new
RegExp(
"("
+ k +
")"
).test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : ((
"00"
+ o[k]).substr((
""
+ o[k]).length)));
}
}
return
fmt;
};
|
在做数据回显的时候,我用的是form.setfiledsvalue(moment(date)),这种方式会导致日期框里面内容错乱
通过查看官网,发现Antd的DatePicker是基于dayjs的,所以回显数据的时候把moment改为dayjs就可以了
M+: this.getMonth() + 1, //月份
d+: this.getDate(), //日
h+: this.getHours(), //
小时
m+: this.getMinutes(), //分
s+: this.getSeconds(), //秒
q+: Math.floor((this.getMonth() + 3
react
+
antd
搭建
前端
管理
框
架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用
react
-redux进行集中管理。目前只包含
前端
代码，未与后台进行关联实现菜单、用户等权限，若需要，则需进行二次开发。
访问链接：https://blog.csdn.net/weixin_48357332/article/details/124860395
如果你
使用
了类似`window.location.reload()`这样的方法来强制
页面
重新加载，那么无论是否
使用
了`count`状态变量，
页面
都
会
被重新加载。在这个例子中，我们
使用
了`useEffect`钩子来在组件挂载时启动一个定时器，在5秒钟后调用`window.location.reload()`方法，强制浏览器重新加载
页面
。只有在
使用
`count`的代码中，当`count`更新时，
React
会
重新渲染组件并更新DOM，从而导致
页面
重新渲染。因此，应该谨慎地
使用
此方法，并在确保必要时才
使用
它。
将每一条数据存在state中，每次点击表格不同行，调用setState更新数据。
查询官网和其他资料（链接见文末）
点击事件改变Modal的visible，从state中取出allowLateSubmission 和allowRepeatSubmission 利用setField
点击“此刻”后，可以看到在
DatePicker
上
时间
（1）和打印出来的dateString（3）是一致的，是当前的
时间
；而value（2）是moment数据，
时间
却多了8
小时
。
在线地址：https://codesandbox.io/s/
datepicker
-now-tm9g2
2、解决办法
可以看到，onChange的第二个参数已经是正确的
时间
，如果需要再用newDate...
这
会
是一个很长的篇章
首先谈谈怎么加快
js
的编译速度吧
在过去7年
时间
里，
js
一直都是用于编码
前端
应用程序最常用的语言。这篇并不是告诉你
js
到底有多强大，审题清楚很重要。如果一个网页内容未能在2秒钟内完成加载，那么访问者就
会
离开，就算你的网站设计有多么的漂亮、厉害都白搭。这就需要优化
js
代码以获得更好的性能。开始喽
尽量减
少
对DOM的访问
每次网页加载的背后其实都是在构建一棵DOM树，如果你的程序需要多次访问DOM元素，可以改成访问一次DOM树并将其用作局部变量。如果从DOM树中删除此值，则该变量也需要设
React
Native 是目前流行的跨平台移动应用开发
框
架之一。通过采用不同的方法进行混合移动应用开发，它不
会
生成原生 UI 组件，而是基于
React
，
React
Native 是一个用于构建基于 Web 的交互界面的
JavaScript
库，因此
会
有更丰富的 UI 体验效果，同时也能够很好地调用底层
框
架的UI
使用
。
React
Native 已经成为一种流行的移动开发技术，它提供了一个
使用
JavaScript
构建原生跨平台移动应用的强大
框
架。
在做原生开发时，一般我们
会
有一些加载H5网页的需求，
Date.prototype.
form
at = function (fmt) {
let o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //
小时
"m+": this.getMinutes(),
前言：开发过程
使用
这个真的踩过的最大的深坑，找了很久也没有没有找到解决方式。
第一想到的解决思路是，在onchange里的做处理，减8
小时
，不过后来发现这个是个天真的想法，
会
导致通过
日期
选择
慢
了8
小时
，
第二想，能过QQ学习群，有大神指导，
使用
UTC方案，操作之后发现，同样有第一种想法的问题。
最无语的，有码友也试了一下，居然他那边是正常的，不存在我这个问题，我TMD无语加崩溃。再加度娘了很...
使用
moment.
js
格式化本地
时间
戳时多出了8
小时
问题，这8
小时
是本地
时间
与格林威治标准
时间
(GMT)的时差
*例如：moment(5*60*1000)，将5分钟的本地
时间
戳转为
日期
，结果
会
多出8
小时
，就是解决此问题。
2、解决方案
fixTimezoneOffset = () => {
const date = new Da...
