A Beginner's Guide to Dates in JavaScript

Introduction

JavaScript, known as JS for short, is one of the most popular programming languages. It is mainly used for creating web applications and almost all websites today are built with JavaScript. JavaScript can also be used for server-side rendering, through the NodeJS environment.

JavaScript contains many inbuilt methods which help programmers get certain values more quickly. Popular among these functions include the Math methods and the Date methods.

In this article, we will be considering the Date Methods. I will also be sharing a few projects that will utilise the knowledge shared in this article.

Happy reading!

JavaScript Dates

Dates in JavaScript are stored in milliseconds since January 1, 1970. There are over 40 Date methods in JavaScript and they are explained in detail below.

I. Date()

The date() method returns the current local date and time. It is invoked with the "new" keyword.

const todaysDate = new Date();
console.log(todaysDate); // Mon May 29 2023 13:34:50 GMT+0100 (West Africa Standard Time)

As seen above, when logged in to the console, new Date() returns the current local day and time.

It is possible to pass parameters into the new Date() method. In the following example, the parameter is a value in milliseconds since January 1, 1970.

new Date(1685363690920); // Mon May 29 2023 13:34:50 GMT+0100 (West Africa Standard Time)

Other parameters that can be passed are the year, month, day, hour, minute, seconds and milliseconds. All can be passed at the same time, or a combination of some as shown below:

new Date(2020,0,15,17,30,18,555); //Wed Jan 15 2020 17:30:18 GMT+0100 (West Africa Standard Time)
new Date(2020,0,15,17,30,18); // Wed Jan 15 2020 17:30:18 GMT+0100 (West Africa Standard Time)
new Date(2020,0,15,17,30); // Wed Jan 15 2020 17:30:00 GMT+0100 (West Africa Standard Time)
new Date(2020,0,15,17); // Wed Jan 15 2020 17:00:00 GMT+0100 (West Africa Standard Time)
new Date(2020,0,15); // Wed Jan 15 2020 00:00:00 GMT+0100 (West Africa Standard Time)
new Date(2020,0); Wed Jan 01 2020 00:00:00 GMT+0100 (West Africa Standard Time);

II. getDate()

getDate() is used to return the current day of the month.

todaysDate.getDate(); // 29

III. getDay()

The getDay() method returns the current day of the week as a number. The numbering system is similar to array indexes. Therefore, Sunday is index 0, Monday is index 1, Tuesday is index 2, and so on.

todaysDate.getDay(); // 1

IV. getFullYear()

The getFullYear() method returns the current calendar year, according to the Gregorian calendar. The getFullYear() method has replaced the now deprecated getYear().

todaysDate.getFullYear(); // 2023

V. getHours()

The getHours() method returns the current hour, using the 24-hour format. Therefore, 1 PM will be 13, 6 PM will be 18, and so on.

todaysDate.getHours(); // 13

VI. getMilliseconds()

The getMilliseconds() method returns the millisecond of a date. This is displayed as a number in the console.

todaysDate.getMilliseconds(); // 920

VII. getMinutes()

The getMinutes() method returns the current minute of the hour.

console.log(todaysDate.getMinutes()); // 34

VIII. getMonth()

The getMonth() method returns the current month of the year, represented by a number. As we saw earlier with the getDate() method, the first month of the year–January– is represented by the number 0, February is represented by 1, May by 4 and so on.

todaysDate.getMonth(); // 4

IX. getSeconds()

The getSeconds() method returns the current second of the minute.

todaysDate.getSeconds(); // 50

X. getTime()

The getTime() method returns the current day and time in milliseconds since January 1, 1970.

todaysDate.getTime(); // 1685363690920

XI. getTimezoneOffset()

The getTimezoneOffset() method returns the time zone difference between local time and the global time (UTC) in minutes. In our example, the local time is one hour ahead of UTC so the console logs "-60".

todaysDate.getTimezoneOffset(); // -60

XII. getUTCDate()

The getUTCDate() method returns the current day of the month according to the Coordinated Universal Time(UTC).

todaysDate.getUTCDate(); // 29

XIII. getUTCDay()

The getUTCDay() method returns the current weekday according to the Coordinated Universal Time(UTC). Remember that it is similar to the getDay() method in the sense that it returns a number. So, in our example, the day of the week is Monday, so the console logs the number 1.

todaysDate.getUTCDay(); // 1

XIV. getUTCFullYear()

The getUTCFullYear() method returns the current calendar year according to the UTC.

todaysDate.getUTCFullYear(); // 2023

XV. getUTCHours()

The getUTCHours() method returns the current UTC hour, according to the 24-hour format.

todaysDate.getUTCHours(); // 12

XVI. getUTCMilliseconds()

The getUTCMilliseconds() method returns the millisecond of a date. This is displayed as a number in the console.

todaysDate.getUTCMilliseconds(); // 920

XVII. getUTCMinutes()

The getUTCMinutes() method returns the current minute of the hour.

todaysDate.getUTCMinutes(); // 57

XVIII. getUTCMonth()

The getUTCMonth() method returns the current month of the year as a number. Recall the explanation on getMonth() above.

todaysDate.getUTCMonth(); // 4

XIX. getUTCSeconds()

The getUTCSeconds() method returns the current second of the minute.

todaysDate.getUTCSeconds(); // 26

XX. setDate()

The setDate() method allows you to set the value of the day of the month between 1 and 31. The other values will remain the same. In the example below, I have set the day to the 12th day of the month. The console will log the date in milliseconds, and when you type in console.log(todaysDate), you will get the new date and time according to the local timezone.

todaysDate.setDate(12); // 1683894890920
console.log(todaysDate); // Fri May 12 2023 13:34:50 GMT+0100 (West Africa Standard Time)

XXI. setFullYear()

The setFullYear() method allows you to set the year of choice. The other values will remain the same. In the example below, I have set the year to 2020. The console will log the date in milliseconds, using the new year value and when you type in console.log(todaysDate), you will get the new date and time according to the local timezone.

It is important to note that setYear() has been deprecated and replaced with setFullYear().

todaysDate.setFullYear(2020); //1589286890920
console.log(todaysDate); // Tue May 12 2020 13:34:50 GMT+0100 (West Africa Standard Time)

XXII. setHours()

The setHours() method is used to manually set an hour different from the current hour. The value must be between 1 and 23. The example below shows my hours value and the value is reflected in the console.

todaysDate.setHours(20); // 1589312090920
console.log(todaysDate); // Tue May 12 2020 20:34:50 GMT+0100 (West Africa Standard Time)

XXIII. setMilliseconds()

The setMilliseconds() method takes an argument of a new milliseconds value between 0 and 999. Note that the console output of todaysDate will not change unless the milliseconds value is greater than 999.

todaysDate.setMilliseconds(400); // 1589312090400
console.log(todaysDate); //Tue May 12 2020 20:34:50 GMT+0100 (West Africa Standard Time)

Note that 1000 milliseconds(ms) is equal to 1 second.

XXIV. setMinutes()

The setMinutes() method takes a minutes value between 0 and 59. The value of minutes will change in our example when you log todaysDate.

todaysDate.setMinutes(33); // 1589312030400
console.log(todaysDate); // Tue May 12 2020 20:33:50 GMT+0100 (West Africa Standard Time)

XXV. setMonth()

The setMonth() method will take a new value of the month. The value should be a number between 0 and 11. Remember the explanation in getMonth() above.

todaysDate.setMonth(11); // 1607801630400 
console.log(todaysDate); // Sat Dec 12 2020 20:33:50 GMT+0100 (West Africa Standard Time)setSeconds()

XXVI. setSeconds()

The setSeconds() method takes a value of seconds between 0 and 59. The console will return a value in milliseconds and you can see the change more clearly when you log your date variable.

todaysDate.setSeconds(40); //1607801620400
console.log(todaysDate); // Sat Dec 12 2020 20:33:40 GMT+0100 (West Africa Standard Time)

XXVII. setTime()

The setTime() method takes a value of milliseconds since January 1, 1970, as seen in this illustration.

todaysDate.setTime(1607811690000); //1607801680000
console.log(todaysDate); //Sat Dec 12 2020 23:21:30 GMT+0100 (West Africa Standard Time)

XXVIII. setUTCDate()

The setUTCDate() is similar to the setDate() method explained above, except that the value is read according to UTC and then converted to local time.

todaysDate.setUTCDate(10); // 1607628880000
console.log(todaysDate); // Thu Dec 10 2020 20:34:40 GMT+0100 (West Africa Standard Time)

XXIX. setUTCFullYear()

The setUTCFullYear() method is similar to the setFullYear() method explained above, except that the value is read according to UTC and then converted to local time.

todaysDate.setUTCFullYear(1990); // 660857680000
console.log(todaysDate); // Mon Dec 10 1990 20:34:40 GMT+0100 (West Africa Standard Time)

XXX. setUTCHours()

The setUTCHours() method is similar to the setHours() method explained above, except that the value is read according to UTC and then converted to local time.

todaysDate.setUTCHours(7); // 660814480000
console.log(todaysDate); // Mon Dec 10 1990 08:34:40 GMT+0100 (West Africa Standard Time)

XXXI. setUTCMilliseconds()

The setUTCMilliseconds() method is similar to the setMilliseconds() method explained above, except that the value is read according to UTC and then converted to local time.

todaysDate.setUTCMilliseconds(670814480000); //1331628960000
console.log(todaysDate); // Tue Mar 13 2012 09:56:00 GMT+0100 (West Africa Standard Time)

XXXII. setUTCMinutes()

The setUTCMinutes() method is similar to the setMinutes() method explained above, except that the value is read according to UTC and then converted to local time.

todaysDate.setUTCMinutes(34); //1331627640000
console.log(todaysDate); // Tue Mar 13 2012 09:34:00 GMT+0100 (West Africa Standard Time);

XXXIII. setUTCMonth()

The setUTCMonth() method is similar to the setMonth() method explained above, except that the value is read according to UTC and then converted to local time.

todaysDate.setUTCMonth(0); // 1326443640000
console.log(todaysDate); // Fri Jan 13 2012 09:34:00 GMT+0100 (West Africa Standard Time)

XXXIV. setUTCSeconds()

The setUTCSeconds() method is similar to the setSeconds() method explained above, except that the value is read according to UTC and then converted to local time.

todaysDate.setUTCSeconds(20); // 1326443660000
console.log(todaysDate); // Fri Jan 13 2012 09:34:20 GMT+0100 (West Africa Standard Time)

XXXV. toDateString()

The toDateString() method takes the date value and converts it to a string. The time values are omitted.

todaysDate.toDateString(); // 'Fri Jan 13 2012'

XXXVI. toGMTString()

The toGMTString() method takes the date and time values and converts them to a string equivalent of GMT (Greenwich Meridian Time). Note that UTC and GMT values are the same.

todaysDate.toGMTString(); // 'Fri, 13 Jan 2012 08:34:20 GMT'

XXXVII. toLocaleDateString()

The toLocaleDateString() method returns the date value according to the local date format.

todaysDate.toLocaleDateString(); // '13/01/2012'

XXXVIII. toString()

The toString() method returns the date and time values in string format.

todaysDate.toString(); // 'Fri Jan 13 2012 09:34:20 GMT+0100 (West Africa Standard Time)'

XXXIX. toTimeString()

The toTimeString() method returns the time value only and in string format.

todaysDate.toTimeString(); // '09:34:20 GMT+0100 (West Africa Standard Time)'

XL. toUTCString()

The toUTCString() method returns the date and time values in string format according to UTC/GMT.

todaysDate.toUTCString(); // Fri, 13 Jan 2012 08:34:20 GMT'

XLI. valueOf()

The valueOf() method returns the date and time values in milliseconds since January 1, 1970.

todaysDate.valueOf(); //1326443660000

JavaScript Dates Use Cases

Before I wrap up this discussion on JavaScript dates, there are a few beginner-friendly projects where the date methods will come in very handy.

The first is an age calculator app, which helps users calculate their current age based on the values entered.

The second is a countdown timer which notifies users of how many days/hours are left before the launch of a website, product, book, etc.

The third is a stopwatch created using JavaScript.

Conclusion

This article has provided a general overview of dates in JavaScript and also a few projects for newbies to practice the date methods.