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

 更新时间:2020年10月29日 11:49:29   作者:k0ko  
这篇文章主要介绍了解决antd datepicker 获取时间默认少8个小时的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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个小时的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中如何使用base64编码和解码

    Vue中如何使用base64编码和解码

    这篇文章主要介绍了Vue中如何使用base64编码和解码问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • Vue中的Ajax 配置代理slot插槽的方法详解

    Vue中的Ajax 配置代理slot插槽的方法详解

    这篇文章主要介绍了Vue中的Ajax 配置代理 slot插槽的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • vue打包后生成一个配置文件可以修改IP

    vue打包后生成一个配置文件可以修改IP

    本文主要介绍了修改Vue项目运行的IP和端口,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • 使用vue.js实现联动效果的示例代码

    使用vue.js实现联动效果的示例代码

    本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • Vue生态系统工具库Vueuse的使用示例详解

    Vue生态系统工具库Vueuse的使用示例详解

    Vueuse 是一个功能强大的 Vue.js 生态系统工具库,它提供了一系列的可重用的 Vue 组件和函数,本文将介绍 Vueuse 的主要特点和用法,以及它在 Vue.js 开发中的作用和优势,感兴趣的可以了解下
    2024-02-02
  • vue3数据更新而视图未更新问题解决

    vue3数据更新而视图未更新问题解决

    本文主要介绍了vue3 解决数据更新而视图未更新问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-10-10
  • 解决运行vue项目内存溢出问题

    解决运行vue项目内存溢出问题

    这篇文章主要介绍了解决运行vue项目内存溢出问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 如何解决Element UI el-dialog打开一次后无法再次打开问题

    如何解决Element UI el-dialog打开一次后无法再次打开问题

    这篇文章主要介绍了如何解决Element UI el-dialog打开一次后无法再次打开问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue3.0自定义指令(drectives)知识点总结

    vue3.0自定义指令(drectives)知识点总结

    在本篇文章里小编给大家整体了一篇关于vue3.0自定义指令(drectives)知识点总结,有兴趣的朋友们可以学习下。
    2020-12-12
  • vue中父子组件的参数传递和应用示例

    vue中父子组件的参数传递和应用示例

    这篇文章主要介绍了vue中父子组件的参数传递和应用示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01

最新评论