Попытка вычислить разницу между двумя датами и временем, используя момент. js - PullRequest
Новая
       51

Попытка вычислить разницу между двумя датами и временем, используя момент. js

1 голос
/ 09 июля 2020

Я использую средство выбора даты / времени, которое нашел на https://material-ui-pickers.dev/ и хотел использовать его с моментом. js библиотека. У меня проблемы. У меня есть форма, которая собирает время начала и время окончания. Я хотел использовать метод moment. js "diff", чтобы вычислить разницу в часах. Я продолжаю получать «20.4234254» или что-то подобное, независимо от того, какие даты и время я ввожу.

Формат даты, который хранится в состоянии и управляется моментом. js: «среда, 8 июля 2020 г. 21:51:23 GMT-0700 (Тихоокеанское время c летнее время) ". 

    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 Ответ

0 голосов
/ 09 июля 2020

Проблема

Я не могу запустить этот код в песочнице (при взаимодействии с 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 , так что на самом деле только передал объект события в качестве первого аргумента и undefined для второго. 

<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>
...