date difference with javascript

Question

Im trying to get the details of date difference between two dates in this format

0 years 2 days 1 hours 20 minutes 47 second

this is my code so far ..which is currently not working

<script>
    var starting_date = '2017-08-02 08:32:28';
    var closing_date= '2017-08-02 09:30:05';

    window.onload=function() {
      // Month,Day,Year,Hour,Minute,Second
      upTime(starting_date); // ****** Change this line!
    };
    function upTime(countTo) {
      //now = new Date();
      countTo = new Date(countTo);
     //difference = (now-countTo); 
      difference = (closing_date-countTo);
      days=Math.floor(difference/(60*60*1000*24)*1);
      years = Math.floor(days / 365);
      if (years > 1){ days = days - (years * 365)}
      hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
      mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
      secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
      document.getElementById('years').firstChild.nodeValue = years;
      document.getElementById('days').firstChild.nodeValue = days;
      document.getElementById('hours').firstChild.nodeValue = hours;
      document.getElementById('minutes').firstChild.nodeValue = mins;
      document.getElementById('seconds').firstChild.nodeValue = secs;

      clearTimeout(upTime.to);
      upTime.to=setTimeout(function(){ upTime(countTo); },1000);
    }

    </script>

    <div id="countup">
      It's been
      <span id="years">00</span> 
      <span class="timeRefYears">years</span>
      <span id="days">00</span>
      <span class="timeRefDays">days</span>
      <span id="hours">00</span>
      <span class="timeRefHours">hours</span>
      <span id="minutes">00</span>
      <span class="timeRefMinutes">minutes</span>
      <span id="seconds">00</span>
      <span class="timeRefSeconds">second</span>
    </div>

current output

It's been NaN years NaN days NaN hours NaN minutes NaN second

if i use the current date it is working fine

now = new Date();
difference = (now-countTo);

You are subtracting a data/number from a **string**. `'2017-08-02 09:30:05'` (the value of `closing_date`) cannot be converted to a valid number, so subtracting from it (`difference = (closing_date-countTo);`) results in `NaN`. Here is a simplified example that has the same problem: `console.log('foo' - 42);`. — Felix Kling, Aug 21 '17 at 02:02
How do i properly convert it ? i'm new on this and still trying to figure this out .. — gtroop, Aug 21 '17 at 02:05
Looking at this really makes me appreciate the work that's gone into [moment.js](https://momentjs.com/). — chazsolo, Aug 21 '17 at 02:06
*"How do i properly convert it ?"* You already know how: `new Date(countTo);`. — Felix Kling, Aug 21 '17 at 02:11
Please see [*Why does Date.parse give incorrect results?*](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) In Safari, `new Date('2017-08-02 08:32:28')` returns an invalid date. — RobG, Aug 21 '17 at 06:21
Please see [*How to create a minimal, complete and verifiable example*](https://stackoverflow.com/help/mcve). If you had created an MCVE, then you'd have realised where the issue was and asked a more accurate question such as "*Why does subtracting a Date from a String produce NaN*?" — RobG, Aug 21 '17 at 06:24
@chazsolo—really has nothing to do with dates, more to do with subtracting different types (neither of which are Number). ;-) — RobG, Aug 21 '17 at 06:25

Netorica · Accepted Answer · 2017-08-21T02:07:27.480

2

try replacing

var starting_date = '2017-08-02 08:32:28';
var closing_date= '2017-08-02 09:30:05';

with this?

var starting_date = new Date('2017-08-02 08:32:28');
var closing_date=  new Date('2017-08-02 09:30:05');

but i recommend that you put a timezone discussed in here

but if you just want to lessen headaches on manipulating dates try to use moment.js

edited Aug 21 '17 at 02:07

answered Aug 21 '17 at 02:04

Netorica

18,523
17
73
108

@gtroop Thank you, if you don't mind please set an accepted answer :) – Netorica Aug 21 '17 at 02:08
You should also fix the parsing, see [*Why does Date.parse give incorrect results?*](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) In Safari, `new Date('2017-08-02 08:32:28')` returns an invalid date. It is strongly recommended to not use the built-in parser. – RobG Aug 21 '17 at 06:22

score 1 · Answer 2 · answered Aug 21 '17 at 02:17

Under where you set countTo to a Date set closing_date to one as well. Also don't use the same variable names:

var starting_date = '2017-08-02 08:32:28';
var closing_dateStr = '2017-08-02 09:30:05'; //append Str

function upTime(countToStr) {  //append Str
  //now = new Date();
  var countTo = new Date(countToStr);
  var closing_date = new Date(closing_dateStr);

My assumption here is that you are getting string dates from somewhere and you will need to convert them, so having them converted before the method is called isn't a solution for you.

Have you tried `new Date('2017-08-02 08:32:28')` in Safari? Not a good idea to use the built-in parser. Ever. — RobG, Aug 21 '17 at 06:27

date difference with javascript

2 Answers2