0

I want to start by saying that I do not have access to a server and all of my HTML and JavaScript is being run out of a share drive. It is mainly for helping the reps format emails to avoid errors. I know there are multiple solutions on SO for what I am trying to do but I found this solution that seems to have everything I am trying to accomplish with subtracting date/time and returning days, hours, and minutes SO 59115531. When I have tried to integrate it into my code, all the calculations come up as NaN. Here is my reduced code:

function myWorkLog() {

  let getTimeDifference = function(from, to) {
    let difMs = (from - to);
    if (difMs <= 0) {
      return 0 + " days, " + 0 + " hours, " + 0 + " mins";
    } else {
      let difDays = Math.floor(difMs / 86400000);
      let difHrs = Math.floor((difMs % 86400000) / 3600000);
      let difMins = Math.round(((difMs % 86400000) % 3600000) / 60000);
      if (difDays == 0) {
        return difHrs + " hours, " + difMins + " mins";
      } else {
        return difDays + " days, " + difHrs + " hours, " + difMins + " mins";
      }
    }
  }

  let startTime = document.getElementById("OutageStart").value
  let endTime = document.getElementById("OutageEnd").value
  //var startTime= new Date('8-31-2023T10:39:00');
  //var endTime= new Date('9-28-2023T10:43:00');
  alert(getTimeDifference(endTime, startTime));
}
<!DOCTYPE html>

<html lang="en-US" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="NE ROC">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="-1" />
  <link rel="stylesheet" href="../../stylesNew.css">
  <title>Repeat Nodes</title>
</head>

<body>

  <!-- Main Content Area -->
  <div class="row">
    <form>
      <!-- Form tag is only used to allow the Clear button at the bottom to clear the data entry area. -->

      <!-- Initial and Resolution -->
      <div class="cell" style="vertical-align: top; padding-top: 10px; ">

        <div class="row">
          <div class="cell">3) Outage Start Date and Time:</div>
          <div class="cell" style="text-align:left"><input type="datetime-local" id="OutageStart" required></div>
        </div>

        <div class="row">
          <div class="cell">10a) Outage End Date and Time:</div>
          <div class="cell" style="text-align:left"><input type="datetime-local" id="OutageEnd" required></div>
        </div>

        <div class="row">
          <div class="cell">&nbsp;</div>
          <div class="cell" id="Email" style="text-align: center;"><input type="button" value="Generate Email" class="SubmitButton" onClick="myWorkLog();" /></div>
        </div>

      </div>
    </form>

  </div>


</body>

</html>

I have tried changing the format of the time by adding .replace("T", " ") and .toLocaleString('en-US') but still received the same NaN

I know the code may be repetitive but I am still learning. Any help would be greatly appreciated!

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Kavorka
  • 306
  • 3
  • 10
  • 7
    The `.value` property of the `` is a *string*, not a Date instance. – Pointy Aug 31 '23 at 20:43
  • 2
    What @Pointy said .. wrap them inside ```new Date()``` .. ```getTimeDifference(new Date(endTime),new Date(startTime))``` – HymnZzy Aug 31 '23 at 20:47
  • 3
    Consider using [`valueAsDate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#valueasdate) instead? – evolutionxbox Aug 31 '23 at 20:54
  • @evolutionxbox does that exist? MDN doesn't mention it but I would not be surprised if it did (exist). – Pointy Aug 31 '23 at 21:12
  • 1
    @Pointy it's part of the HTML standard https://html.spec.whatwg.org/multipage/input.html#dom-input-valueasdate – evolutionxbox Aug 31 '23 at 21:27
  • 1
    @evolutionxbox yea I see that now, an obviously good idea. – Pointy Aug 31 '23 at 21:53
  • Yeah, [don't parse dates with new Date(string)](https://stackoverflow.com/q/2587345/215552). – Heretic Monkey Aug 31 '23 at 22:14
  • 1
    Thank you all for the suggestions. I tried the `valueAsDate` but came up with 0 days, 0 hours, 0 min. After reading what @evolutionbox posted, I decided to try `valueAsNumber` and that worked – Kavorka Sep 01 '23 at 11:48

0 Answers0