Javascript comparing two dates has wrong result

Question

I'm trying to learn a little more about JavaScript and decided to make a countdown timer that will show from years all the way down to milliseconds. It's just a learning experiment for me.

The minutes are not correct. If I refresh the browser, the seconds and minutes always start at 59. I think this may be because I am calling the Date object and possibly resetting it. What I am looking for is to count down to a certain date.

Because this is a learning experiment for me, if you see something else that may be improved upon, please let me know.

var dateA = new Date();
var dateB = new Date('June 3, 2014 00:27:00');
var cntr  = setInterval(clock, 10);

function clock()
{
  dateB = (dateB - 10);
  var date = new Date(dateB);
  var yrs  = Math.abs(date.getUTCFullYear() - dateA.getUTCFullYear() );
  var mos  = Math.abs(date.getUTCMonth() - dateA.getUTCMonth());
  var days = Math.abs(date.getUTCDate() - dateA.getUTCDate());
  var hrs  = Math.abs(date.getUTCHours() - dateA.getUTCHours());
  var mins = Math.abs(date.getUTCMinutes() - dateA.getUTCMinutes());
  var secs = Math.ceil(date.getUTCSeconds() - dateA.getUTCSeconds() / 60);
  var mill = Math.ceil(date.getUTCMilliseconds() - dateA.getUTCMilliseconds() / 999);
  var str  =
    yrs  + ' Years&nbsp;&nbsp;&nbsp;'  +
    mos  + ' Months&nbsp;&nbsp;&nbsp;' +
    days + ' Days&nbsp;&nbsp;&nbsp;'   +
    hrs  + ' Hours&nbsp;&nbsp;&nbsp;'  +
    mins + ' Mins&nbsp;&nbsp;&nbsp;'   +
    secs + ' Secs&nbsp;&nbsp;&nbsp;'   +
    mill + ' Mill';
  document.getElementById('clock').innerHTML = str;
}

`setInterval` calls the clock function every 10 milliseconds. In order for the clock function to deincrement, I needed to have `dateB = (dateB - 10)`. Echoing the value of `dateB` without it does nothing. — NaN, Jun 03 '14 at 04:02

Bergi · Accepted Answer · 2014-06-03T04:46:34.577

var yrs  = Math.abs(date.getUTCFullYear() - dateA.getUTCFullYear() );
var mos  = Math.abs(date.getUTCMonth() - dateA.getUTCMonth());
var days = Math.abs(date.getUTCDate() - dateA.getUTCDate());
var hrs  = Math.abs(date.getUTCHours() - dateA.getUTCHours());
var mins = Math.abs(date.getUTCMinutes() - dateA.getUTCMinutes());

You cannot just take the absolute value of the differences of each part of the date! You end up with totally wrong numbers.

var secs = Math.ceil(date.getUTCSeconds() - dateA.getUTCSeconds() / 60);
var mill = Math.ceil(date.getUTCMilliseconds() - dateA.getUTCMilliseconds() / 999);

Why would you divide these by 60 and by nearly-1000?!

Instead, to calculate the time difference, you will need to get the complete difference (in milliseconds, usually) and convert that into the different units. Your function should look like this:

var el = document.getElementById('clock');
function clock() {
  var diff = dateB - Date.now();
  var yrs  = Math.floor(diff / 31536000000);
  var mos  = Math.floor(diff / 2678400000) % 12;
  var days = Math.floor(diff / 86400000)   % 31;
  var hrs  = Math.floor(diff / 3600000)    % 24;
  var mins = Math.floor(diff / 60000)      % 60;
  var secs = Math.floor(diff / 1000)       % 60;
  var mill =            diff               % 1000;
  var str  =
    yrs  + ' Years&nbsp;&nbsp;&nbsp;'  +
    mos  + ' Months&nbsp;&nbsp;&nbsp;' +
    days + ' Days&nbsp;&nbsp;&nbsp;'   +
    hrs  + ' Hours&nbsp;&nbsp;&nbsp;'  +
    mins + ' Mins&nbsp;&nbsp;&nbsp;'   +
    secs + ' Secs&nbsp;&nbsp;&nbsp;'   +
    mill + ' Mill';
  el.innerText = str;
}

Thank you Bergi for the example. Before your edit, I had no idea what you were trying to explain, but with this example, I can clearly see now. Thank you. — NaN, Jun 03 '14 at 05:49
Bergi, can you please tell me how you arrived at `2678400000` for the month calculation? — NaN, Jun 03 '14 at 10:21
I just approximated a month with 31 days, which are `2678400000` milliseconds. There might be better ideas. — Bergi, Jun 03 '14 at 15:34
That's fine, thank you. I see what I was doing wrong. Thanks again for putting me on the right track with this snippet. — NaN, Jun 04 '14 at 01:54

score 0 · Answer 2 · edited May 23 '17 at 10:28

0

If you're using javascript for comparing dates or counting number of days, you might have some problems. You should use a library for better results.

I recommend you to use http://momentjs.com/ for date or time function. It's easy to use and much more flexible.

This should answer your question: Countdown timer using Moment js

edited May 23 '17 at 10:28

Community

1
1

answered Jun 03 '14 at 04:02

nodeffect

1,830
5
25
42

thanks. I am looking at that now. Is there a way to do this using straight JS? Again, this is just a learning experiment for me. – NaN Jun 03 '14 at 04:06
Sure, Moment.js is written in Javascript. – Paul Jun 03 '14 at 04:08
:) I know it's written in JavaScript, but without having yo rely on an external library is what I was asking. Can I do this without the library? – NaN Jun 03 '14 at 04:10
Well, I've done something like this using just straight JS, and it gives me lots of problems, unexpected results and longer codes. Using momentJs I can do the same thing with lesser codes and better results. – nodeffect Jun 03 '14 at 04:15
All these "Math.abs(date.getUTCFullYear() - dateA.getUTCFullYear() );" gives inaccurate results when comparing. – nodeffect Jun 03 '14 at 04:16
NaN, what I meant was, you can look at the source code they used, trace its execution in your mind, and simplify it and try to just pick out the pieces you need. But doing that yourself requires effort, testing, and is fraught with error. https://github.com/moment/moment/blob/develop/moment.js – Paul Jun 03 '14 at 04:16
OK, I see what you mean. I'm also having issues. I've looked at the JS library and it looks good. Very easy to use too. Thanks for pointing that out to me. – NaN Jun 03 '14 at 04:16
@Paul, Now I see what you mean. That's a good idea. Maybe I should have picked something different to learn on. I didn't realize that there were so many issues with the Date class. – NaN Jun 03 '14 at 04:18
@nodeffect, is node required for this or can I run without it? – NaN Jun 03 '14 at 04:24
what node? I don't quite get you... You just need to include the library. eg. – nodeffect Jun 03 '14 at 04:26
It looks like node.js is a dependency for this. Actually, I see what it means. It looks like you can call moment.js from node.js and Require.js – NaN Jun 03 '14 at 04:29

score 0 · Answer 3 · answered Jun 03 '14 at 04:11

0

try this..

function checkFromDate(sender, args) {
    if (sender._selectedDate > new Date()) {
        alert("You cannot select a day future than today.");
        sender._selectedDate = new Date();
        sender._textbox.set_Value(sender._selectedDate.format(sender._format))
    }
}

answered Jun 03 '14 at 04:11

SANDEEP

1,062
3
14
32

Thank you Sandeep. How exactly is this going to help me? – NaN Jun 03 '14 at 04:19

Javascript comparing two dates has wrong result

3 Answers3

Linked