Javascript date differnce variables NaN

Question

<!DOCTYPE html>

<html>
<head>
<title></title>
<meta name="author" content="" />
<meta name="keywords" content="" />

<style type="text/css">

body {
background-color: rgb(250, 100, 100); }

#pc {
width: 500px;
height:300px;
background-color: rgb(247, 240, 224);
border: rgb(50, 153, 254) 5px groove;
margin-left: auto;
margin-right: auto;
margin-top: 100px; }

#clock {
background-color: rgb(50, 153, 254);
float: left;
border: rgb(50, 153, 254) 5px groove;
height: 150px;
width: 150px;
margin-top: 45px;
margin-left: 25px; }

#HT1 {
background-color: black;
color: yellow;
text-align: center;
margin-top: -1px;
margin-left: auto;
margin-right: auto;
width: 100px;
}

#HT2 {
background-color: black;
color: yellow;
text-align: center;
margin-top: -1px;
width: 125px;
margin-left: auto;
margin-right: auto;
}

#Date {
background-color: black;
color: yellow;
font-size: 18px;
text-align: center;
width: 125px;
margin-top: -12px;
margin-left: 15px;
}

#Time {
background-color: black;
color: yellow;
font-size: 18px;
text-align: center;
width: 125px;
margin-top: 50px;
margin-left: 15px;
}

#hourglass {
position: absolute;
margin-left: 43px;
}

#countdown {
background-color: rgb(50, 153, 254);
float: right;
border: rgb(50, 153, 254) 5px groove;
height: 200px;
width: 250px;
margin-top: 25px;
margin-right: 25px; }

#title {
text-align: center; 
margin-bottom: 0px; 
font-variant: small-caps;
color: yellow; 
background-color: black; 
width: 100%; 
margin-top: 0px;
border-bottom: rgb(50, 153, 254) 5px groove; 
height: 45px;
}       

#day {
background-color: black;
color: yellow;
font-size: 18px;
text-align: right;
width: 125px;
}

#hours {
background-color: black;
color: yellow;
font-size: 18px;
text-align: right;
width: 125px;
}

#minutes {
background-color: black;
color: yellow;
font-size: 18px;
text-align: right;
width: 125px;
}

#seconds {
background-color: black;
color: yellow;
font-size: 18px;
text-align: right;
width: 125px;
}
</style>

<script type="text/JavaScript" src="main.js">
</script>
</head>

<body onload="day(); current(); DateDiff();" >
<div id="pc">

<h1 id="title">Count Down to <span id="Event">_ _ _ _ _ _ _ _</span></h1>

<div id="clock">
<h3 id="HT1">Time</h3>

<div id="Date">
<span id=Month></span>/<span id="Day"></span>/<span id="Year"></span>
</div>

<img id="hourglass" src="clock.png" height="64px" width="64px" alt="This is an hourglass" />
<span id="Date" ></span>

<div id="Time">
<span id="Hours"></span>
</div>

</div>

<div id="countdown">
    <h3 id="HT2">Countdown</h3>
    <div id="day"><span id="ED">____</span> Days</div><br />
    <div id="hours"><span id="EH">____</span> Hours</div><br />
    <div id="minutes"><span id="EM">____</span> Minutes</div><br />
    <div id="seconds"><span id="ES">____</span> Seconds</div><br />
</div>



</div>
</body>

</html>

In this project, I'm trying to figure out how long the differnce is between two dates. One date is the current date, the other is a date of a persons choosing. The issue I'm having is since the dates in the variables are strings and not numbers I get NaN. I tried using the parseInt() property but, that gives me 8 which is not the differnce betweeen now and New Years Eve. So, how do I change a variable to a number, but keep it in the date format?

This is my current code for both finding the future date, and finding the difference.

/* Future Date Variables */
var DayF;
var MonthF;
var FullF;
var event;
var time;
var someday;

/* Asks for event name and the date */
function day()
{
    event = prompt("Please input a day you want to count down too");
    while (event == 0 || event == null)
    {
        if (event == 0 || event == null)
        {
            alert("That is not a valid event, please try again");
            event = prompt("Please input a day you want to count down too");
        }
    }
    document.getElementById("Event").innerHTML = event;
    
    MonthF = prompt("Please input the month the event is in");
    DayF = prompt("Please input the day the event is on");
    FullF = prompt("Please input the year, note we do not go into the past");
    
    if(MonthF < 1 || Month > 12)
     {
      alert("There are only 12 months, please try again");
      MonthF = prompt("Please input the month the event is in");
     }
     
    if(DayF > 31 || DayF < 1)
     {
      alert("There is only an average of 31 days in a month");
      DayF = prompt("Please input the day the event is on");
     }
     
    if(FullF < 2018)
     {
      alert("I said we do not go into the past");
      FullF = prompt("Please input the year, note we do not go into the past");
     }
    someday =(MonthF + "/" + DayF + "/" + FullF);
}

/* Current Time and Date Variables */
var nd = new Date();
var M = nd.getMonth();
var D = nd.getDate();
var F = nd.getFullYear();
var H = nd.getHours();
var Min = nd.getMinutes();
var Sec = nd.getSeconds();
var ap = "am";

/* Gets and Displays current time */
function current()
{
 M = M + 1;

 document.getElementById("Month").innerHTML= M;
 document.getElementById("Day").innerHTML= D;
 document.getElementById("Year").innerHTML= F;
 
 if (H > 12) 
 {
    H = H - 12;
    ap = "pm";

        if (H > 12) 
        {
         H = H - 12;
            ap = "am";
     }

        if (H == 0) 
        {
            H = 12;
        }

        if (Min < 10) 
        {
            Min = "0" + Min;
        }
    }   
    document.getElementById("Hours").innerHTML= + H + ":" + Min + " " + ap;    
}

var newdate 

function DateDiff()
{
 newdate = (M + "/" + D + "/" + F);
 var diffDays = parseInt((someday - newdate) / (1000 * 60 * 60 * 24)); 
 alert(diffDays);

}

What does your HTML look like? Please mention the relevant part of HTML code in your question. — Rahul Desai, Apr 19 '18 at 17:49
Possible duplicate of [how to compare two string dates in javascript?](https://stackoverflow.com/questions/14781153/how-to-compare-two-string-dates-in-javascript) — Calvin Nunes, Apr 19 '18 at 17:49
@nurdyguy strings are not guaranteed to parse as dates unless they're in ISO 8601 format. — Jared Smith, Apr 19 '18 at 17:50
use moment.js library for things like that. [see this stackoverflow thread](https://stackoverflow.com/questions/25150570/get-hours-difference-between-two-dates-in-moment-js) — Raz Lifshitz, Apr 19 '18 at 17:51
@JaredSmith Sure, but the parseInt (with subtraction) on the next line is certainly going to have problems if newdate is just the string. I was really trying to point out the _first_ issue. At the very least it is not going to do what OP thinks it will. — nurdyguy, Apr 19 '18 at 17:52

Cory Kleiser · Answer 1 · 2018-04-19T20:04:58.480

Essentially you need to convert the dates into int marked by milliseconds. Then find the difference. Divide it by milliseconds in a day. And round the number off to the nearest int.

You could do it like this:

var date1 = "2018-04-19T20:23:01.804Z";
var date2 = "2018-12-31T23:59:34.527Z"; //New Year's Eve

var dateDifference;

function getDifference(dateA, dateB){
  var dateInt1 = new Date(date1);
  var dateInt2 = new Date(date2);
  if(dateInt1<dateInt2){
    dateDifference = Math.round((dateInt2 - dateInt1)/86400000);
  }else{
    dateDifference = Math.round((dateInt1 - dateInt2)/86400000);
  }
}

getDifference(date1, date2);

console.log(dateDifference);

Javascript date differnce variables NaN

1 Answers1