【问题标题】：Trying to calculate the difference between 2 time and dates using moment.js尝试使用 moment.js 计算 2 个时间和日期之间的差异
【发布时间】：2020-07-09 05:06:54
【问题描述】：

我正在使用在 https://material-ui-pickers.dev/ 上找到的日期/时间选择器，并希望将它与 moment.js 库一起使用。我有一些问题。我有一个收集开始时间和结束时间的表格。我想使用 moment.js “diff”方法来计算小时差。无论我输入什么日期和时间，我都会不断收到“20.4234254”或类似的信息。

在 state 中保存并由 moment.js 管理的日期格式为： “2020 年 7 月 8 日星期三 21:51:23 GMT-0700（太平洋夏令时间）”。

    import React, { useState, useEffect } from 'react';
import MomentUtils from '@date-io/moment';
import {
  DatePicker,
  TimePicker,
  DateTimePicker,
  MuiPickersUtilsProvider,
} from '@material-ui/pickers';
import moment from 'moment';



function DateFormField() {
  const [startDate, startTime] = useState(new Date());
  const [endDate, endTime] = useState(new Date());
  const [duration, setDuration] = useState("");
  
  const timeCalc = (startDate, endDate) => {
    var start = moment(startDate);
    var end = moment(endDate);
    console.log(end.diff(start, "hours", true) + ' hours');
  }


  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
        
      <DateTimePicker value={startDate} onChange={startTime} helperText="Start Time" />
      <DateTimePicker value={endDate} onChange={endTime} helperText="End Time" />
      <button onClick={timeCalc}>Time Duration: {duration}</button>
    </MuiPickersUtilsProvider>
  );
}

export default DateFormField;

【问题讨论】：

标签： reactjs material-ui momentjs

【解决方案1】：

问题

我无法让此代码在沙箱中运行（与 DateTimePicker 交互由于某种原因会引发 utils.getYearText is not a function TypeError），但我想我知道问题所在。

您定义 timeCalc 以使用两个参数，startDate 和 endDate

const timeCalc = (startDate, endDate) => {
  var start = moment(startDate);
  var end = moment(endDate);
  console.log(end.diff(start, "hours", true) + ' hours');
}

但是在触发它的按钮中，您只需将函数附加到onClick 处理程序，因此它实际上仅将事件对象作为第一个参数传递，而第二个参数未定义。 p>

<button onClick={timeCalc}>Time Duration: {duration}</button>

然后，我通过将startDate 和endDate 状态值传递给函数主体，手动测试了timeCalc，它（大概）正确返回0 hours，正如两个几乎所预期的那样em> 相同的时间戳。

const timeCalc = (startDate, endDate) => {
  var start = moment(startDate);
  var end = moment(endDate);
  console.log(end.diff(start, "hours", true) + " hours");
};

timeCalc(new Date(), new Date());

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"&gt;&lt;/script&gt;

解决方案

要么删除 timeCalc 的参数，因此引用的 startDate 和 endDate 值将是全局组件范围内的值

const timeCalc = () => {
  var start = moment(startDate);
  var end = moment(endDate);
  console.log(end.diff(start, "hours", true) + ' hours');
}

或者显式地将状态值传递给回调

<button onClick={() => timeCalc(startDate, endDate)}>
  Time Duration: {duration}
</button>

【讨论】：