解决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 相关文章推荐
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
JS倒计时代码汇总
Nov 25 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
详解CocosCreator项目结构机制
Apr 14 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
php+js实现异步图片上传实例分享
2014/06/02 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
详解php中 === 的使用
2016/10/24 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
使用Python开发windows GUI程序入门实例
2014/10/23 Python
为Python程序添加图形化界面的教程
2015/04/29 Python
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
python pygame实现2048游戏
2018/11/20 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
文明演讲稿范文
2014/05/12 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
2014年电教工作总结
2014/12/19 职场文书
服装店员工管理制度
2015/08/07 职场文书