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
– NaN, Commented Jun 3, 2014 at 4:02

Bergi · Accepted Answer · 2014-06-03 04:46:34Z

1

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;
}

edited Jun 3, 2014 at 4:46

answered Jun 3, 2014 at 4:33

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

NaN Over a year ago

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 Over a year ago

Bergi, can you please tell me how you arrived at 2678400000 for the month calculation?

Bergi Over a year ago

I just approximated a month with 31 days, which are 2678400000 milliseconds. There might be better ideas.

NaN Over a year ago

That's fine, thank you. I see what I was doing wrong. Thanks again for putting me on the right track with this snippet.

Community · Accepted Answer · 2017-05-23 10:28:36Z

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, 2017 at 10:28

CommunityBot

11 silver badge

answered Jun 3, 2014 at 4:02

nodeffect

1,8405 gold badges27 silver badges43 bronze badges

11 Comments

NaN Over a year ago

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.

Paul Over a year ago

Sure, Moment.js is written in Javascript.

NaN Over a year ago

:) 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?

nodeffect Over a year ago

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 Over a year ago

All these "Math.abs(date.getUTCFullYear() - dateA.getUTCFullYear() );" gives inaccurate results when comparing.

|

SANDEEP · Accepted Answer · 2014-06-03 04:11:38Z

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 3, 2014 at 4:11

SANDEEP

1,0823 gold badges14 silver badges32 bronze badges

1 Comment

NaN Over a year ago

Thank you Sandeep. How exactly is this going to help me?

Collectives™ on Stack Overflow

Javascript comparing two dates has wrong result

3 Answers 3

4 Comments

11 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related