解决antd datepicker 获取时间默认少8个小时的问题


Posted in Javascript onOctober 29, 2020

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) / 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;
};

2、对选中日期的时间进行格式化处理,最终得到的时间就是当前时间

new Date(value).format(“yyyy-MM-dd hh:mm:ss”)

补充知识:antd datepicker设置开始时间和期限计算出结束时间并且去除周六日

datepicker 需要使用moment格式的时间作为value,但是在操作 此value时,包括moment.add()等方法都会直接改变datepicker的值,即使没有重新赋值。此时需要配合moment-immutable-methods使用

import { momentImmutableMethods } from 'moment-immutable-methods'
momentImmutableMethods(moment)

getFinishTime=(value)=>{
    const {getFieldValue} = this.props.form
    let i = 0
    if(typeof(value)==="number"){
      let incomingTime = getFieldValue("incomingTime")
      while(i<value){
        if(incomingTime.addImmu(1,'d').weekday()!==5&&incomingTime.addImmu(1,'d').weekday()!==6){
          i++
          incomingTime = incomingTime.addImmu(1,'d')
        }else{
          incomingTime = incomingTime.addImmu(1,'d')
        }
      }
      this.setState({
        finishTime:value===16?moment():incomingTime,
        disabledFinishTime:value===16?false:true
      })
    }else if(typeof(value)==="object"){
      let deadTime = getFieldValue("deadTime")
      while(i<deadTime){
        if(value.addImmu(1,'d').weekday()!==5&&value.addImmu(1,'d').weekday()!==6){
          i++
          value = value.addImmu(1,'d')
        }else{
          value = value.addImmu(1,'d')
        }
      }
      this.setState({
        finishTime:deadTime===16?moment():value,
        disabledFinishTime:deadTime===16?false:true
      })
    }
 }

以上这篇解决antd datepicker 获取时间默认少8个小时的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js类 from qq
Nov 13 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
javascript 中的继承实例详解
May 05 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
vue配置多页面的实现方法
May 22 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 #Javascript
微信小程序实现可长按移动控件
Nov 01 #Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 #Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 #Javascript
vue制作toast组件npm包示例代码
Oct 29 #Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 #Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 #Javascript
You might like
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
jQuery 使用手册(二)
2009/09/23 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
JS delegate与live浅析
2013/12/21 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
介绍Python中的__future__模块
2015/04/27 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
Python中base64与xml取值结合问题
2019/12/22 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
python——全排列数的生成方式
2020/02/26 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
python学习笔记之多进程
2020/08/06 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
医学生自荐信范文
2013/12/03 职场文书
酒店端午节促销方案
2014/02/18 职场文书
委托公证书
2014/04/08 职场文书
联片教研活动总结
2014/07/01 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书