时间戳

首页 > 解决方案 > 尝试使用 moment.js 计算 2 个时间和日期之间的差异

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

问题描述

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

在 state 中保存并由 moment.js 管理的日期格式为：“Wed Jul 08 2020 21:51:23 GMT-0700（Pacific Daylight Time）”。

    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;

标签： reactjsmaterial-uimomentjs

解决方案

问题

我无法让这段代码在沙箱中运行（与 交互由于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>

推荐阅读