尝试使用 moment.js 计算 2 个时间和日期之间的差异

IT技术 reactjs material-ui momentjs

2021-05-07 15:46:07

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

状态保存并由 moment.js 管理的日期格式为：“Wed Jul 08 2020 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;

1个回答

问题

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

您定义timeCalc使用两个参数，startDate并且endDate

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

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

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

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

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());

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>

解决方案

要么删除参数，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>

其它你可能感兴趣的问题

上一篇地图内 React 中渲染方法中的 API 调用下一篇如何在 ubuntu 服务器中设置我的 React 应用程序