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

赞 (0)

相关推荐

  • antd日期选择器禁止选择当天之前的时间操作

    使用disabledDate属性(不可选择的日期) <a-date-picker @change="dateChange" :disabledDate="disabledDate" v-decorator="['endDate']"/> 在js中定义函数并返回 //限制当天之前的日期不可选 disabledDate(current) { return current && current <moment().su

  • Antd中单个DatePicker限定时间输入范围操作

    1.某个时间段 import React from 'react'; import moment from 'moment'; class DateDemo extends React.Component{ disabledDate = (current) => { return current < moment().startOf('day') || current > moment().add(6, 'day') ; }; datePickerChange = (date) =>

  • antd-DatePicker组件获取时间值,及相关设置方式

    DatePicker组件默认语言是英语,需要设置为中文的话,需要安装moment. import moment from "moment"; import "moment/locale/zh-cn" format属性,设置日期的格式,如"2020-02-28". 设置日期 选择日期是今天之前[包含今天] 需要和moment搭配应用 // 设置默认的起始日期 const disabledDate = (current) => { consol

  • antd通过 filterDropdown 自定义按某天时间搜索功能

    import React, { Component } from 'react'; import { Table, Input, Button, Icon, DatePicker } from 'antd'; import moment from 'moment'; import Highlighter from 'react-highlight-words'; export default class RpoliceRecord extends Component { constructor(

  • 解决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(), //

  • 解决antd 表单设置默认值initialValue后验证失效的问题

    方法一: getFieldDecorator没有第三个参数,如果写了3个参数就会出错 错误代码: <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ required: true, message: '请输入用户名', }], })( <Input placeholder='请输入用户名'/> ) } </Form.Item> 正确代码: <Form.Ite

  • 解决iView中时间控件选择的时间总是少一天的问题

    今天在用iview做前端页面开发的时候,遇到一个奇葩问题(也许自己主要做后台开发,当时我还纳闷了),我在时间控件中明明选择的是2017-10-19,但是当通过vue的调试器查看的时候,竟然是这样的,如下图: 当时我还纳闷了,这iview的时间控件真神奇,我还百度谷歌了好半天,后来查看官方文档,是我获取时间的方式不是很对,我当时用的是l来v-mode绑定的,这样绑定后获取的时间好像叫utc时间,如果要想获取正确的时间,通过@on-change事件来绑定即可,(注意,用@on-change来获取时间

  • 如何解决java获取时间相差8小时的问题

    如何解决java获取时间相差8小时的问题

    目录 三种时间差错问题: 原因: 解决方案: 总结:都是时区问题 三种时间差错问题: java下使用new date()获取的时间会和真实的本地时间相差8小时. 本地获取的时间没有错,存入数据库的时候时间相差8小时. 数据库时间没有错,获取到了后端,之后返回给前端相差8小时. 原因: new date()调用的是jvm时间,而jvm使用的时间默认是0时区的时间,即:和北京时间将会相差8小时. mybatis将本地的数据传入到mysql数据库服务器的时候,服务器会对数据进行检测,会把date类型的

  • BAT获取时间有空格问题的解决方法

    最近在项目上需要把文件定时备份,用BAT文件来自动生成文件夹名,精确到秒: bat脚本时间设定如下: pushd E:\Test set T=%date:~0,10%-%time:~0,2%%time:~3,2%%time:~6,2% md %T% popd time变量值如下的各个操作的意义如下: %time:~0,2% 表示从左向右指针向右偏0位,然后从指针偏移到的位置开始提取2位字符,结果是小时字段数值 %time:~3,2% 表示指针从左向右偏移3位,然后从偏移处开始提取2位字符,结果是

  • laravel 解决后端无法获取到前端Post过来的值问题

    效果如下所示: 刚开始一直获取不到前端传过来的Post的值 一番分析后 发现 通过php 命令新建的控制器默认少引用 就是上图圈起来的这个 引入就问题解决了 当然 前提是路由要配置正确 路由配置成Post或者any的时候才能获取到Post的值 附上我的路由图 希望对大家有帮助 以上这篇laravel 解决后端无法获取到前端Post过来的值问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 解决Antd 里面的select 选择框联动触发的问题

    有两个 select框,且这俩select框是关联的,触发select1,select2里面才会有值. 但是现在的问题是这样的: 触发select1,触发select2,再触发select1,此时select2里面的值变成了上次一选中的value 值,而不会被清空. 解决办法: 使用Select 里面的value属性,来进行清空 <Form style={{padding:'20px','boxSizing':'border-box'}}> <FormItem label="套

  • 解决antd Form 表单校验方法无响应的问题

    antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响应 发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动

随机推荐