解决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的开源工具PACKER2.0.2
Nov 04 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
requireJS使用指南
Apr 27 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
php多任务程序实例解析
2014/07/19 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
JS的数组的扩展实例代码
2008/07/09 Javascript
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
python实现加密的方式总结
2020/01/19 Python
Python 如何测试文件是否存在
2020/07/31 Python
python实现单机五子棋
2020/08/28 Python
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
巴西在线鞋店:Shoestock
2017/10/28 全球购物
学生夜不归宿检讨书
2014/09/23 职场文书
求职自我评价范文100字
2014/09/23 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js