解决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 相关文章推荐
javascript动态加载二
Aug 22 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
js 上传图片预览问题
2010/12/06 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python 以16进制打印输出的方法
2018/07/09 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
高中生的学习总结自我鉴定
2013/10/26 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
业务部主管岗位职责
2014/01/29 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
护士工作失误检讨书
2014/09/14 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
2016大学军训心得体会
2016/01/11 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript