Introduction to time and date

It's probably not a surprise that you can work with dates and times in javascript. There's an object built in for that which is used all the time in all sorts of projects. Often to be able to set a date for when something has happened or will happen. For example which date an event is, when you can buy tickets, sales dates for a product etc. Sometimes dates comes as a number from a server and you want to format it into a nice string. That is really easy to do in javascript.

It's also possible to do time measurements, where you want to measure how long it takes to do something or have some interval for how long something may last. Times and dates are used for all sorts of things and learning how it works isn't really hard, it just takes a little time to get accustomed with.

The date object

var d = new Date(); // current time

d = new Date(2017, 07); // 2017-07-01
d = new Date(2017, 07, 05); // 2017-07-05
d = new Date(2017, 07, 05, 20); // 2017-07-05 20:00:00
d = new Date(2017, 07, 05, 20, 30); // 2017-07-05 20:30:00
d = new Date(2017, 07, 05, 20, 30, 45); // 2017-07-05 20:30:45
d = new Date(2017, 07, 05, 20, 30, 45, 0); // 2017-07-05 20:30:45:00

d = new Date('July 05, 2017 20:30:45'); // 2017-07-05 20:30:45

Date is an object that works for everything that has to do with times and dates in javascript. It contains a date which is given to it and can be used to calculate years, months, days, hours, minutes, seconds etc. To create a date object you create a new instance of it with new (var d = new Date();) and store it in a variable. What happens then is that a new object is created with the current moments timestamp. It's also possible to give it another time as an argument.

Something nice with javascripts date is it automatically keeps track on all days every month has, which weekday the date is, when it's leap years and so on. All this is calculated automatically and nothing one even has to think about.

How it works behind the scenes is that the date objects are calculated in milli seconds starting from midnight the first january 1970, to the date they contain. All time in between is what's used to calculate and compare them with each other. The object also has lots of methods that extracts and does many different things, here we'll have a look at the most common ones.

GetDate, getDay, getFullYear & getMonth

These methods are used to get information about what day, weekday, month and year a date object has.

var d = new Date(); // 2017-07-05

var day = d.getDate(); // 5
var weekday = d.getDay(); // 3
var year = d.getFullYear(); // 2017
var day = d.getMonth(); // 6

The method getDate returns what day in the month the date has with a number between 1-31. GetDay is similar but instead returns what day in the week it is between 0-6, where 0 is sunday and 6 saturday. As usual in javascript most things starts with 0. GetFullyear returns what year it has, and getMonth which month it has with a number between 0-11. 0 is january and 11 december.

Note: There's also a method called getYear, but it's deprecated and should no longer be used. Use getFullYear instead.

GetHours, getMinutes, getSeconds & getMilliseconds

To get information about the time a date object has these methods can be used.

var d = new Date(); // 2017-07-05 20:30:45

var hours = d.getHours(); // 20
var minutes = d.getMinutes(); // 30
var seconds = d.getSeconds(); // 45
var milli = d.getMilliseconds(); // 0

GetHours returns what hour the date has from 0-23, getMinutes what minute from 0-59, and getSeconds what seconds from 0-59. GetMilliseconds returns the milliseconds.

GetTime & Date.now

GetTime returns all the milliseconds that has passed since the first january 1970 until the date object was created (or what it's set to). Useful when you want to calculate the time between two different date objects.

var d1 = new Date('July 05, 2017 18:30:45');
var d2 = new Date('July 05, 2017 20:55:04');

d1.getTime(); // 1499272245000

// Difference in time between the dates
var diff = (d2.getTime() - d1.getTime()); // 8659000

// getTime() is not necessary
var seconds = (d2 - d1) / 1000; // 8659
var minutes = (d2 - d1) / (1000 * 60); // 144.317

Date.now does the exact dame thing except no new object has to be created. It's a static method that just returns the current time as a number.

Javascripts methods for setting times and dates

There's a couple methods for changing or "setting" dates and time. It's easy to remember them since every get method has a corresponding set method. They're listed in the example below.

var d = new Date(); // 2017-07-07 20:35:30

d.setFullYear(1987); // 1987-07-05
d.setMonth(11); // 1987-12-05
d.setDate(14); // 1987-12-14
d.setHours(9); // 1987-12-14 09:35:30
d.setMinutes(10); // 1987-12-14 09:10:30
d.setSeconds(59); // 1987-12-14 09:10:59
d.setMilliseconds(25); // 1987-12-14 09:10:59:25
d.setTime(1000000000000); // 2001-09-09

Finally: the date objects string methods

To return the date objects as strings with a custom format and perhaps printing them out in the browser, there's a couple different methods for doing this. ToDateString returns the date in an easy readable way, toLocaleDateString does it in the format (yyyy-mm-dd), toTimeString returns the time as (hh:mm:ss) also with the current timezone. ToLocaleTimeString does the same thing as toTimeString but without the timezone info. ToLocaleString gets the date and time as (yyyy-mm-dd hh:mm:ss).

var d = new Date(); // 2017-07-07 20:35:30

d.toDateString(); // Sat Jul 05 2017
d.toLocaleDateString(); // 2017-7-5
d.toTimeString(); // 20:35:30 (GMT+0200 W. Europe Daylight Time
d.toLocaleString(); // 2017-7-5 20:35:30
d.toLocaleDateString(); // 20:35:30

Try it yourself

  1. Create a couple date objects and try out the different get and set methods.
  2. Calculate the time between two different date objects.
  3. Create a live javascript clock! Below is a basic example how it can be done.

<body>
<p id="clock">00:00:00</p>

<script>
var d = new Date();
var clock = document.getElementById('clock');

function tick() {
d.setSeconds(d.getSeconds() + 1);
clock.textContent = d.toLocaleTimeString();
}
setInterval(tick, 1000);
</script>
</body>