Course: JavaScript

Progress (0%)

  1. Foundation

  2. Numbers

  3. Strings

  4. Conditions

  5. Loops

  6. Arrays

  7. Functions

  8. Objects

  9. Exceptions

  10. HTML DOM

  11. CSSOM

  12. Events

  13. Drag and Drop

  14. opt Touch Events

  15. Misc

  16. Project: Analog Clock

JavaScript Dates

Chapter 77 9 mins

Learning outcomes:

  1. Introduction to dates in JavaScript
  2. Getting the current date
  3. Setting dates manually
  4. Setter and getter methods on date objects

Introduction

There will be many instances when, as a JavaScript developer, you will need to work with dates and times.

For instance if you are working with a website for an airline system you may need to use both dates and times. If you are working with cookies in JavaScript, even then you'll be better off with knowing these concepts.

And knowing how to work with the Date() object would be your job in such cases.

The Date() constructor

Be it a time or a date, in the past, present or the future there is only one way to play with all this stuff in JavaScript - using the Date() constructor.

When used without any arguments at all the function returns the current date:

var date = new Date();
console.log(date);

Setting the date

Apart from getting the current date, we can also use the Date() constructor to set the date manually.

When given a single argument, the argument is treated as the number of milliseconds since Jan 01 1970.

new Date(milliseconds)

Consider the example below where we set the date to 1 second above the starting time.

var date = new Date(1000); // 1000ms above Jan 1970.

1 second = 1000 milliseconds
Notice the seconds part in the time of this expression - it indeed shows one second!

Not only this but the Date() constructor can also take multiple arguments in the order year, month, day, hours, minutes and seconds.

new Date(year, month, day, hours, minutes, seconds)

Months start from 0 and go upto 11. Days start from 1 and go upto 31.

Let's demonstrate a few examples:

Year 2000, and month January:

var date = new Date(2000, 0);
console.log(date);

Since we've omitted other paramters like day, hours etc in this snippet, they all will be set to their initial values - day is set to 01, hours to 00 and so on.

Year 2000, month January and day 3:

var date = new Date(2000, 0, 3);

Year 2000, month January, day 3 and 6th hour:

var date = new Date(2000, 0, 3, 6);

Notice the 06:00:00 here - it indeed indicates the 6th hour.

And the rest you should try out yourself!

In the examples above we specified the month, day, hour in normal ranges. However we can also go beyond them in which case the function will resolve the overhead itself.

For instance in the following example we set the the date to 24 months after 2000 01 Jan:

var date = new Date(2000, 24);

We can also use negative values to go backwards:

var date = new Date(2000, -12);

The same also applies to day, hours etc.

Following we set the date to 367 days since 31 Dec 2000.

var date = new Date(2000, 0, 367);

We can't used negative values in years.

Date setter methods

In all the examples above we utilised the Date() constructor directly to set given dates, but now we will take a look at some of its methods to do this job.

The methods setYear(), setMonths(), setDays(), setHours(), setMinutes(), setSeconds() and setMilliseconds() set the corresponding part of the given date to the given value.

var date = new Date(); // current date
date.setYear(90); // the year becomes 1990

Click this long number again and again and you will see it change. This is because of the fact that setYear() sets ONLY the year of the current date to the given value - the rest remains the same i.e the seconds, minutes, hours still increment!

One thing to note about all these methods is that they return a number in milliseconds since new Date(0) corresponding to the value you gave to them. This means that to show the new date we first have to convert this milliseconds format into a more readable one.

And we can do that using either the Date() constructor directly or some methods on it to convert between formats.

Going with the former choice we have the following:

var date = new Date();
date.setYear(90);
date = new Date(date); // milliseconds given to Date()

Another method similar to setYear() is setFullYear() which won't round values in the range 0-99 to 1990-1999 respectively.

var date = new Date(); // current date
date.setFullYear(90); // the year becomes 0090

The concepts discussed above for the other parts like month, days also apply to these setting methods. For example setMonth(-24) will go 24 months backwards from the given date.

The exploration of the rest of these setter methods is your task! Go on to the console and start dating JavaScript!

Date getter methods

Similar to the setter methods we also have date getter methods with essentially the same end-naming.

The methods getYear(), getMonths(), getDays(), getHours(), getMinutes(), getSeconds() and getMilliseconds() get the corresponding part of the given date.

Following we get the year of the current date using getFullYear(). We use it instead of getYear() to get the full year and not any shortened form which we will otherwise have to process further:

var date = new Date(); // current date
date.getYear();

var date = new Date(2000, 0); // 200, Jan 01
date.getYear();

Displaying dates

The last concept left to be covered in this chapter is how to display dates in a readable format.

JavaScript comes with more than a couple of methods to display dates differently so let's take a look at all of them.

To display the whole date including the time in UTC Format we can use the method toUTCString(). To match locale of the operating system we can use toLocaleString().

The locale is simply the local format of the operating system of your device. View the date or time on your device and see how it matches with locale formats in JavaScript.

var date = new Date(); // current date
date.toUTCString();
date.toLocaleString();

To display the date only in a more humanly readable format we can use the method toDateString() and for matching the locale of the OS we can use toLocaleDateString().

var date = new Date(); // current date
date.toDateString();
date.toLocaleDateString();

To display the time only we can use the method toTimeString() and for matching the locale of the OS we can use toLocaleTimeString().

var date = new Date(); // current date
date.toTimeString();
date.toLocaleTimeString();

And this is all you need to know for JavaScript dates.

In conclusion

This chapter was a long one after such a long JavaScript course that you have been taking for a while, but no doubt one which will take you level as a front end developer way higher up the average.

Dates are fundamental to time intensive applications and knowing how to work with them even on a basic level is better off than not knowing them at all! Make sure you understand all the concepts on this page and practice for a while with JavaScript dates.

When you feel you are all perfect with them move on to the next avenue in this course - Dates quiz.