AntD使用Form表单DatePicker时间组件时间差一天bug

最新推荐文章于 2024-05-11 15:56:58 发布
最新推荐文章于 2024-05-11 15:56:58 发布
阅读量2.6k 收藏
点赞数 1
分类专栏： React JS 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40138556/article/details/110309934
版权

问题
在使用AntD使用Form表单DatePicker时间组件的时候，测试意外测出一个历史bug，很神奇，时间会差一天！直接使用Form表单并提交时间会显示时间是Object类型，选择2020-11-30，保存的时候会变成2020-11-29xxx（具体时间后缀），可能是时间组件为英文的原因？转换为中文后日期还是没有转过来，就差了一天……
解决
保存时用方法转一下日期

if(typeof(item.date) === 'object') {
   
   item.date= moment(
最低0.47元/天 解锁文章
莉兹Liz
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端---antd中的日期选择组件
sinat_39227164的博客
05-20 1928
前端---使用antd中的DatePicker实现YearPicker需求现有的组件类型手动实现YearPicker 需求 需要设计一个时间选择框，但是之只需要选中某年即可，且拿到选择的这年的值作为url请求参数去请求数据。 当用户需要获取一个日期，可以点击标准输入框，弹出日期面板进行选择。如下图： 现有的组件类型 日期类组件包括以下四种形式。（无YearPicker） DatePicker ...
antd-react-form-builder:例子
05-13
antd-react-form-builder Deprecated，请使用 之所以写了这个项目有以下几点原因： 的表单验证是会触发整个组件渲染，（使用Form.create()装饰器后和getFieldDecorator后） 默认的Antd表单组件是不自带验证的，需要使用配套的getFieldDecorator装饰过后才可以验证。 没有嵌套的表单可用。 基于以上原因，就有了本项目。 本项目是基于的antd-react-form-builder，既可以使用配置生成表单（整合了表单验证，单并不采用getFieldDecorator），也支持直接是使用JSX。（两种方式都支持，就像使用react-router一样） 安装 目前只支持通过npm安装。 npm install antd-react-form-builder --save 兼容 兼容IE10以上，兼容谷歌、Safari、火狐等浏览器
解决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(), //分 s+: this.getSeconds(), //秒 q+: Math.floor((this.getMonth() + 3
将antd Form里的RangePicker, DatePicker,转化成想要的值
最新发布
https://github.com/lisy999?tab=repositories
05-11 291
【代码】获取antd Form里的数据时如果有RangePicker, DatePicker,获取他们转化的值。
Antd---日期选择框DatePicker
dengchai8691的博客
01-26 1582
获取DatePicker值的方法 方法一： 以前一直用的是下面这个方法，半路前端加前端新人，方法可能有点不优雅。 监听datePicker的onChange事件 触发onChange时，即改变state。当点击提交按钮时，再获取this.state.foundingtime的值。 方法二： 　　由于客户需求变更，需要对这部分代码进行修改，再次看到这段代码，老感觉...
AntD使用Form表单DatePicker时间组件时间会少一天的BUG
m0_65808332的博客
11-30 586
AntD使用Form表单DatePicker时间组件时间会少一天的BUG
vue中DatePicker从前台到后台日期偶尔差一天
全盛
01-05 1958
项目中遇到的奇葩BUG，前台选择的时间传入后台偶尔时间差一天，一开始一位时区没统一，后发现可能是vue的DatePicker造成的影响。 <el-date-picker :clearable="false" v-if="timemode === '0'" v-model='seldate' type='date' format="yyyy-MM-dd" value-format="yyyy-MM-dd" :placeholder="$t('i18n.qmht.label.s
React Hooks应用antd中 DatePicker组件设置时间小于当前时间
weixin_45952668的博客
09-05 332
react hooks ,antdesign
antd-DatePicker组件获取时间值,及相关设置方式
01-21
DatePicker组件默认语言是英语，需要设置为中文的话，需要安装moment。 import moment from “moment”; import “moment/locale/zh-cn” format属性，设置日期的格式，如“2020-02-28”。 设置日期 选择日期是...
antd form表单数据回显操作
01-22
index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, ...
解决antd的Form组件setFieldsValue的警告问题
01-21
记住：setFieldsValue的字段要对应得...在使用setFieldsValue给表单Form的某一个filed赋值时，可能掺杂了非表单控件中的字段，Form表单在赋值和渲染时发现有些字段无法渲染在现有的字段（因为不存在），所以就会报出这
antd Form组件行并列显示 Form表单属性为inline时,表单组件宽度问题
01-06
Form标签 layout属性设置为’inline’ 时 下拉组件宽度没有自适应: // 方法1:用Row + Col 定义自己需要的宽度,把layout属性设置为'horizontal', const formLayout = { labelCol: { span: 4 }, wrapperCol: { ...
antd组件Datepicker中，时区差8小时前端处理
热门推荐
Front end development engineer
08-09 2万+
在开发中会用到antd 的 Datepicker组件 会出现传给后台的时间与你选中的时间相差八小时 选中的时间： 向后台传输的时间：
react使用的antd组件库之DatePicker组件线上和线下显示中英文混合bug解决
Yetian_2000的博客
07-01 983
1、首先到package.json文件中看有没有moment插件的引入； 2、运行：npm install -S moment // 若有moment的最新版本引入 可跳过该步骤， 建议使用moment的最新版本； 3、在使用DatePicker组件的文件处最上面 需要导入两个插件 import ‘moment/locale/zh-cn’; import locale from ‘antd/es/date-picker/locale/zh_CN’; 再在DatePicker组件中加入locale属
datepick 提交数据日期少一天，小8小时，时区格式化问题
crsit的专栏
09-28 4643
在使用ant design 中，使用了 a-date-picker 以及 moment 和 axios等插件时 选择时间提交后，发现后台获取的时间少了8个小时，如只有日期的却少了一天。 后面经过跟踪发现是moment格式化使用了 this.toDate().toISOString() 因此改写该moment日期格式化方法 /** 两种格式化日期时间方法，解决时间提交后因时区问题...
解决viewUI中 DatePicker控件获取的日期总是少一天的问题
m0_37595853的博客
04-23 751
解决viewUI中 DatePicker控件获取的日期总是少一天的问题 1、 使用v-model绑定日期，保存时获取的日期格式是“Mon Feb 01 2021 00:00:00 GMT+0800 (中国标准时间)”返回的是中国标准时间，这种方式操作时获取的日期总是少一天。 2、 使用:value绑定日期，保存时获取的日期格式是“yyyy-MM-dd”，这种方式获取的日期就是正常日期 总结:使用DatePicker控件绑定数据应该使用":value"属性，这种方式获取的日期就是正常日期。 ...
android 日期减少一天,在Android日期选择器中禁用一天中的特定日期
weixin_30021053的博客
06-04 305
我正在使用datePicker,我可以通过以下代码禁用今天的最后几天和30天后的后几天：DatePickerDialog datePicker = new DatePickerDialog();Calendar calender = Calendar.getInstance();long today = calender.getTimeInMillis();final long oneDay = ...
antd datepicker 获取时间默认少8个小时的解决方法
u010298371的专栏
05-28 2802
1、扩展日期格式化方法 Date.prototype.format = function (fmt) { let o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(),
写一个antd的form表单组件
02-21
我可以为你提供一个简单的antd表单组件的示例：import { Form, Input, Button } from 'antd';class LoginForm extends React.Component { handleSubmit = e => { e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { console.log('Received values of form: ', values); } }); }; render() { const { getFieldDecorator } = this.props.form; return ( <Form onSubmit={this.handleSubmit}> <Form.Item> {getFieldDecorator('username', { rules: [{ required: true, message: '请输入用户名!' }], })( <Input placeholder="用户名" />, )} </Form.Item> <Form.Item> {getFieldDecorator('password', { rules: [{ required: true, message: '请输入密码!' }], })( <Input type="password" placeholder="密码" />, )} </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> 登录 </Button> </Form.Item> </Form> ); } }const WrappedLoginForm = Form.create({ name: 'normal_login' })(LoginForm);export default WrappedLoginForm;

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值