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

当使用antd datepicker组件时，如果直接获取时间，会发现时间与当前时间相比，会少了8个小时。这是因为在时间日期的传递和展示过程中，涉及到时区的转换问题。下面我将详细介绍解决此问题的完整攻略。

问题背景

当我们使用antd datepicker组件获取时间的时候，可能会发现控制台打印出来的时间有8个小时的差异。原因是在传递与展示时遇到时区转换问题。

解决方案

1.使用moment.js进行时间转换

moment.js是一个比较常用的处理时间与日期的JavaScript库，它对于时间的转化有比较好的支持。我们首先需先安装moment.js。

npm install moment -S

具体步骤如下所示：

import moment from 'moment' // 引入moment.js

onChange(value, valueString) {
  const timestamp = moment(value).unix(); // 将时间转成时间戳
  const newDate = new Date(timestamp * 1000); // 将时间戳转成Date对象
  console.log(newDate); // 验证时间是否正确
}

以上代码首先将所选择的时间使用moment转成对应的时间戳（单位为秒），乘以1000后再转成Date对象，此时获取到的时间就已经是因为时区问题所少的8小时之后的时间了。

2.使用moment-timezone.js进行时间转换

上述方案中，我们已经解决了时区问题。但是，如果你的需求中需要支持不同的时区，比如处理不同时区内的会议时间，moment.js就不能满足需求了。

这时，可以使用moment-timezone.js解决问题。moment-timezone.js是在moment.js的基础上添加了时区处理功能，可以有效的解决时区问题。

首先，需安装moment-timezone.js：

npm install moment-timezone -S

然后在代码中引入moment以及moment-timezone.js，并调用相关函数来处理时间。

import moment from 'moment-timezone';

// 设置时间以及所在时区
const time = moment.tz('2021-11-11 00:00:00', 'Asia/Shanghai')
// 将时间转成对应的时间戳
const timestamp = time.unix()
// 将时间戳转成Date对象
const date = new Date(timestamp * 1000)

以上代码首先设置时间以及对应时区，然后将时间转成对应的时间戳（单位为秒），乘以1000后再转成Date对象，此时获取到的时间与所设置的时区完全对应。

示例说明

下面，我们通过两个示例来说明具体操作。

示例1：使用moment.js进行时间转换

import React from 'react';
import moment from 'moment';

class DatePickerDemo1 extends React.PureComponent {
  onChange(value, valueString) {
    const timestamp = moment(value).unix();
    const newDate = new Date(timestamp * 1000);
    console.log(newDate);
  }

  render() {
    return (
      <DatePicker onChange={this.onChange.bind(this)} />
    );
  }
}

export default DatePickerDemo1;

以上示例中，我们引入moment库，通过onChange事件函数获取所选择的时间，并使用moment.js中提供的函数将时间转成时间戳，最后将时间戳转成Date对象，此时获取到的newDate即为准确的时间。

示例2：使用moment-timezone.js进行时间转换

import React from 'react';
import moment from 'moment-timezone';

class DatePickerDemo2 extends React.PureComponent {
  onChange(value, valueString) {
    // 设置时间以及所在时区
    const time = moment.tz(valueString, 'Asia/Shanghai');
    // 将时间转成对应的时间戳
    const timestamp = time.unix();
    // 将时间戳转成Date对象
    const newDate = new Date(timestamp * 1000);
    console.log(newDate);
  }

  render() {
    return (
      <DatePicker onChange={this.onChange.bind(this)} />
    );
  }
}

export default DatePickerDemo2;

以上示例中，我们引入moment-timezone库，首先设置时间以及对应时区，然后将时间转成对应的时间戳，最后将时间戳转成Date对象，此时获取到的newDate与所设置的时区完全对应。

总结

在使用antd datepicker组件时，我们可能会遇到所获取的时间与给定时间之间差8个小时的问题。这是因为在传递与展示中遇到的时区问题导致的。为了解决这个问题，我们可以使用moment.js或者moment-timezone.js进行时间转换，使获取到的时间准确无误。