How to calculate long periods of time in JavaScript?

Question

I have been looking at a countup timer to run from a specific date, however the code I have used only seems to display the length of time for the previous 15 years and no further back? This is a very simple concept that I just can't get to work, dates such as jan 12 2001 are fine but any lower than 1999 does not seem to have an effect and the days limits arount 5440...

window.onload=function() {
  // Month,Day,Year,Hour,Minute,Second
  upTime('oct,01,0000,00:00:00'); // ****** Change this line!
}

function upTime(countTo) {
  now = new Date();
  countTo = new Date(countTo);
  difference = (now-countTo);

  days=Math.floor(difference/(60*60*1000*24)*1);
  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('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);
}

#countup p {
  display: inline-block;
  padding: 5px;
  background: #FFA500;
  margin: 0 0 20px;
}

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

Answer 1

EDIT:

I have improved the snippet and included additional information and links.

---

The problem is how you set up the Date() object. Go here to check out different valid options.

In your case, what you want to do is:

var countTo = new Date(year, month, day, hours, minutes, seconds);

But you are passing just one parameter and, in that case, it should be the number of milliseconds in UCT between the specified date and midnight January 1, 1970.

Also, you can create the Date() object first and then set individually the different time units. When you do so, you must use setFullYear. I have used setYear in the first edition of my answer and that is plainly wrong: it is not just obsolete, but also lead to unexpected results in the 0-99 range (as the OP pointed out in a comment to this answer).

I have cleaned up my snippet to make it useful also for other people:

//we get a reference to the input elements
var i_year = document.getElementById('i_year');
var i_month = document.getElementById('i_month');
var i_day = document.getElementById('i_day');
var i_hours = document.getElementById('i_hours');
var i_minutes = document.getElementById('i_minutes');
var i_seconds = document.getElementById('i_seconds');
var button = document.getElementById('start_counting');

//we declare a new date, it will be the default value
var start_time = new Date();

//counting starts!
setInterval(function() {
  upTime();
}, 1000);

function upTime() {
  //if the inputs have any value, we update start_time
  if (i_year.value) start_time.setFullYear(i_year.value);
  //Months go from 0 to 11, so we substract 1
  if (i_month.value) start_time.setMonth(i_month.value - 1);
  if (i_day.value) start_time.setDate(i_day.value);
  if (i_hours.value) start_time.setHours(i_hours.value);
  if (i_minutes.value) start_time.setMinutes(i_minutes.value);
  if (i_seconds.value) start_time.setSeconds(i_seconds.value);

  //difference between both dates in ms
  var difference = (new Date() - start_time);

  var msSecond = 1000;
  var msMinute = 60 * msSecond;
  var msHour = 60 * msMinute;
  var msDay = 24 * msHour;

  var days = Math.floor(difference / msDay);
  difference -= days * msDay;

  var hours = Math.floor(difference / msHour);
  difference -= hours * msHour;

  var minutes = Math.floor(difference / msMinute);
  difference -= minutes * msMinute;

  var seconds = Math.floor(difference / msSecond);

  //updating the counter with the new values
  document.getElementById('days').firstChild.nodeValue = days;
  document.getElementById('hours').firstChild.nodeValue = hours;
  document.getElementById('minutes').firstChild.nodeValue = minutes;
  document.getElementById('seconds').firstChild.nodeValue = seconds;

}

#countup p {
  display: inline-block;
  padding: 5px;
  background: #FFA500;
  margin: 0 0 20px;
}

#target_date input {
  display: inline-block;
  width: 50px;
  margin-bottom: 10px;
}

<div id="target_date">
  <input type="text" id="i_year" placeholder="Year">
  <input type="text" id="i_month" placeholder="Month">
  <input type="text" id="i_day" placeholder="Day">
  <input type="text" id="i_hours" placeholder="Hours">
  <input type="text" id="i_minutes" placeholder="Minutes">
  <input type="text" id="i_seconds" placeholder="Seconds">
</div>
<hr>

<div id="countup">
  It's been
  <p id="days">0</p>
  <p>days</p>
  <p id="hours">0</p>
  <p>hours</p>
  <p id="minutes">0</p>
  <p>minutes</p>
  <p id="seconds">0</p>
  <p>second</p>
</div>

The range of years supported in the date object is approximately 285,616 years before and after 1970. That is due to the actual range of times supported by ECMAScript Date objects. Read here and here about it.

One last thing. If you dig into the topic you will find critics to the way javascript deals with calculating the difference between dates. Not all are true (e.g. as you can check in the snippet javacript does get into account leap-years). But it will be problematic to go back thousands of years back in time if you need completely accurate results. Not just because of technical aspects, but also due to human ones (calendar changes through history, timezones, daylight saving times, etc.).

There are javascript specific libraries for this kind of calculation. I think Moment.js is one of the most popular ones.

Hope it helps!