Home > Programming > JavaScript > Date and Time
Dates and Time with JavaScript
A lot of things about computers are linked with time and dates. For example, banks and stock markets need to coordinate so money and stock transfer times match for all the computers in a network. There is a whole service (NTP) of time servers on the Internet whose purpose is to help computers stay coordinated.
Most people who set up a computer from scratch also set it to match times with an appropriate NTP server. Among many other Internet resources, you can find a very helpful page of instructions (which happens to be directed at Ubuntu GNU/Linux users.
After getting the accurate time set initially, most time and date work is done within the computer where the web page or application is running. Over a short duration, like a day or even a week, the computer's internal clock is accurate. The "correction" applied from a network time check typically gets done when the computer is turned on or once a day or once a week after that. If you do not set computer time regularly, it will drift. Anybody interested can find a lot of interesting (if complex) discussions online. No matter when you start looking, your effort will be "timely."
Within Web pages, JavaScript is the primary interactive toolkit. On this web page, I'll begin to look at how to manipulate dates and times using JavaScript.
The simplest call for the time is:
<script> var d = new Date(); document.write(d); </script>
Since that information is pulled from your computer's clock by JavaScript, it will only be really accurate if you have recently set the time whether manually or using NTP.
The opening and closing script tags <script> and </script> tell the web browser where the JavaScript begins and ends in this HTML5 page. For the rest of the page, the snips will not show the script tags. If you are using older HTML, the opening script tag usually needs a little bit more information to guarantee JavaScript gets used:
<script type="text/javascript">.
The date and time you see is pulled from your computer's clock hardware by the browser when it uses the function new Date() as part of the script to print something to the document as the page displays. If you refresh this page, the date will update to show a new time (perhaps even a new date if you don't refresh until tomorrow.).
The displayed date and time are actually a construction of a text string built in the browser. For JavaScript internals, the date is stored as an integer value of the number of milliseconds since January 1, 1970.
document.write('<b>Milliseconds since 1/1/1970 = ' + d.getTime() + '</b>');
In order to get a "nicely" formatted date, we need to convert pieces of the date so we can display them.
JavaScript provides "methods" by which we can extract specific pieces from the date variable. the d.getTime() above was one such method. Methods are essentially actions or built-in JavaScript functions which can be applied to variables.
Here are a few of the key date methods we need.
d.getFullYear() // full four-digit year d.getMonth() // month from 0 to 11 d.getDay() // day of week from 0 to 6 d.getUTCDate() // date in the month
The next step is using JavaScript arrays to substitute a word for the month and the day of the week.
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; // array of day names
var month = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; // month name array
document.write ('days[d.getDay()] converts the day of the week from ' + d.getDay() + 'to: ' + days[d.getDay()]);
document.write ('month[d.getMonth()] converts the month of the year from ' + d.getMonth() + ' to: ' + month[d.getMonth()]);
document.write ('<b> Today is ' + days[d.getDay()] + ' ' + month[d.getMonth()] + ' ' + d.getUTCDate() + ', ' + d.getFullYear() + '<</b>.'); // US Style
document.write ('<b> Today is ' + days[d.getDay()] + ' ' + d.getUTCDate() + ' ' + month[d.getMonth()] + ' ' + d.getFullYear() + '</b>.'); // Eurostyle
We take the results from the date methods
or Eurostyle
<script>
var now = new Date();
var start = new Date(now.getFullYear(), 0, 0);
var diff = (now - start) + ((start.getTimezoneOffset() - now.getTimezoneOffset()) * 60 * 1000);
var oneDay = 1000 * 60 * 60 * 24;
var day = Math.floor(diff / oneDay);
document.write('<strong>Day of year: </strong>' + day);
</script>
There are many more date and time methods to explore. One place to start looking is the W3Schools Date Reference Page.