INTERNET

An Introduction to Dates and Times in JavaScript

0

Working with dates is an important aspect of programming. The built-in date object is used to work with dates and times in JavaScript. The various methods of the date object make the task a lot easier while working with dates and times.

In this article, you'll learn everything you need to know about working with dates in JavaScript. So, without further ado, let's hop in.

How to Create Date Objects

You can create a date object in JavaScript using the following four ways:

1. new Date()

The new Date() constructor creates a date object with the current date and time.

let d = new Date();console.log(d);

Output:

Mon Jan 03 2022 20:27:58 GMT+0530 (India Standard Time)

2. new Date(datestring)

The new Date(datestring) constructor creates a date object from a date string.

let d = new Date("2022-01-01");console.log(d);

Output:

Sat Jan 01 2022 05:30:00 GMT+0530 (India Standard Time)

3. new Date(milliseconds)

The new Date(milliseconds) constructor creates a date object by adding the milliseconds to the zero time. The parameter represents the time passed in milliseconds since 1 January 1970 UTC.

let d1 = new Date(0);console.log(d1);let d2 = new Date(973436457364);console.log(d2);

Output:

Thu Jan 01 1970 05:30:00 GMT+0530 (India Standard Time)Sun Nov 05 2000 20:30:57 GMT+0530 (India Standard Time)

4. new Date(year, month, day, hours, minutes, seconds, milliseconds)

The new Date(year, month, day, hours, minutes, seconds, milliseconds) constructor creates a date object with a specified date and time. The seven parameters specify the year, month, day, hours, minutes, seconds, and milliseconds respectively.

let d = new Date(2020, 10, 11, 15, 29, 46, 0);console.log(d);

Output:

Wed Nov 11 2020 15:29:46 GMT+0530 (India Standard Time)

You can also create a date object with six, four, three, or two parameters.

a) The six parameters specify year, month, day, hour, minute, and second.

b) The five parameters specify year, month, day, hour, and minute.

c) The four parameters specify year, month, day, and hour.

d) The three parameters specify year, month, and day.

e) The two parameters specify year and month.

Note:

  • JavaScript counts months from 0 to 11 i.e, January is represented by 0, and December is represented by 11.
  • If you specify out-of-range values in the Date object, it will not throw an error instead, it auto-corrects itself.
// March does not have 40 days, the overflow is auto-correctedlet d = new Date(2020, 2, 40);console.log(d);

Output:

Thu Apr 09 2020 00:00:00 GMT+0530 (India Standard Time)

JavaScript Date Get Methods

You can use the following methods to get information from a date object.

1. getFullYear()

This method returns the year as a four-digit number (yyyy) according to local time.

let d = new Date();console.log(d.getFullYear());

Output:

2022

2. getMonth()

This method returns the month as a number (0-11) according to local time.

let d = new Date();console.log(d.getMonth());

Output:

0

3. getDate()

This method returns the day as a number (1-31) according to local time.

let d = new Date();console.log(d.getDate());

Output:

3

Related: An Introduction to Data Types in JavaScript

4. getHours()

This method returns the hour (0-23) according to local time.

let d = new Date();console.log(d.getHours());

Output:

22

5. getMinutes()

This method returns the minute (0-59) according to local time.

let d = new Date();console.log(d.getMinutes());

Output:

40

6. getSeconds()

This method returns the ​​​​​​​second (0-59) according to local time.

let d = new Date();console.log(d.getSeconds());

Output:

30

7. getMilliseconds()

This method returns the ​​​​​​​millisecond (0-999)​​​​​​​ according to local time.

let d = new Date();console.log(d.getMilliseconds());

Output:

55

Related: JavaScript One-Liners You Should Know

8. getTime()

This method returns the time in milliseconds since January 1, 1970.

let d = new Date();console.log(d.getTime());

Output:

1641230088884

9. getDay()

This method returns the ​​​​​​​weekday as a number (0-6)​​​​​​​ according to local time.

let d = new Date();console.log(d.getDay());

Output:

1

Note: If you want to work with the UTC dates, you can use the following date methods: getUTCDate()​​​​​​​, getUTCDay()​​​​​​​, getUTCFullYear()​​​​​​​, getUTCHours()​​​​​​​, getUTCMilliseconds(), getUTCMinutes()​​​​​​​, getUTCMonth(), and getUTCSeconds().

JavaScript Date Set Methods

You can use the following methods to set a part of a date object.

1. setDate()

This method sets the day as a number (1-31) for a specified date according to local time.

let d = new Date();d.setDate(20);console.log(d);

Output:

Thu Jan 20 2022 22:58:59 GMT+0530 (India Standard Time)

Related: JavaScript Math Methods You Should Master Today

2. setFullYear()

​​​​​​​This method sets the ​year for a specified date according to local time.

let d = new Date();d.setFullYear(2016);console.log(d);

Output:

Sun Jan 03 2016 23:00:41 GMT+0530 (India Standard Time)

3. setHours()

This method sets the hour (0-23)​​​​​​​ for a specified date according to local time.

let d = new Date();d.setHours(15);console.log(d);

Output:

Mon Jan 03 2022 15:02:01 GMT+0530 (India Standard Time)

​​​​​​​Related: How to Build a Simple Calculator Using HTML, CSS, and JavaScript

4. setMilliseconds()

This method sets the milliseconds (0-999)​​​​​​​ for a specified date according to local time.

let d = new Date();d.setMilliseconds(548);console.log(d);

Output:

Mon Jan 03 2022 23:04:13 GMT+0530 (India Standard Time)

Similarly, you can use the setMinutes()​​​​​​​, setMonth()​​​​​​​, and setSeconds() methods to set the minutes (0-59), month (0-11)​​​​​​​, and seconds (0-59) respectively for a specified date according to local time.

JavaScript Current Time Example​​​​​​​

A simple example to print the current time of the system:

<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Current Time</title> </head> <body> <p id="target"></p> </body> <script type="text/javascript"> var current = new Date(); var hour = current.getHours(); var minute = current.getMinutes(); document.getElementById('target').innerHTML = hour + ":" + minute; </script></html>

If you want to have a look at the complete source code used in this article, here's the GitHub repository.​​​​​​​

Develop Projects Using the Date Concepts of JavaScript

You'll encounter many instances of JavaScript dates while working on real-world applications. If you want to get started with a simple project and gain hands-on experience, you can develop a digital clock using HTML, CSS, and JavaScript. Along with dates, you'll also learn some important JavaScript concepts like working with variables, using functions,​​​​​​​ accessing and adding properties to DOM, and more.

admin

3 Reasons Why You Should Try ProtonMail

Previous article

9 Times Hackers Targeted Cyberattacks on Industrial Facilities

Next article

You may also like

Comments

Leave a reply

Your email address will not be published.

More in INTERNET

Login/Sign up