As you already know everything in JavaScript is an object. One of the objects is so weird in JavaScript called Date(). Today, even experienced devs get nervous with Date() and reach for libraries like ‘date-fns’ and ‘moment’.

Yes, you read it at the right moment. which is the most popular library while struggling with date and time.

I personally used it many times in my projects and many date-picker libraries like ‘RC-date-picker’ depends on the moment. as it takes the moment object as a value and returns the same.

But, today we are not talking about any third-party library. We will be learning how to date, obviously in JavaScript. 😉

Date() can be quite simple if you know how to deal with it. I’ll walk you through some simple implementations of Date() throughout this blog.

first, let’s take brief knowledge about time zones:

Time zones: –

Around the world, there are several time zones. however, with JavaScript, only two of them are important – 1) Local Time and 2) Coordinated Universal Time (UTC).

1) Local Time – It refers to the current time zone in which our computer is right.

2) UTC – It is like GMT – which stands for Greenwich mean time. (Technically both are the same)

By default, JavaScript Date() object returns local time. but it returns UTC when we specify the same.

How to create a date:

we can create a date with a new Date() method and there are four ways to create a date using a new Date().

1. Date string method.
2. Passing arguments method.
3. Timestamp method.
4. No arguments method.

1.) Date string method: –

In this method, you can create a date by passing a date string in the new Date().

Usually, we opt for the date string method because we are using date strings since our childhood.

But here’s a catch, if we provide a string like 2000-03-16 it’s totally fine, but writing it as 16-03-2000 in the Date object, returns an Invalid Date.

let’s see why-

because there are multiple date formats used all over the world. And dates like 05-07-2011 can be 05 July 2011 or 07 May 2011. It is a bit confusing, right?

In JavaScript, you must choose a universally recognized format when using a date string. One of these formats is the (ISO 8601 Extended format) hyperlink to ‘https://en.wikipedia.org/wiki/ISO_8601’.

What do these values mean?

• YYYY      -> 4-digit year
• MM       -> 2-digit month
• DD          -> 2-digit date
• –              -> Date delimiters
• T             -> Indicates – times start here
• HH          -> 24-digit hour
• Mm        -> Minutes
• ss            -> Seconds
• sss          -> Milliseconds
• :               -> Time delimiters
• Z: If Z is present, the date will be set to UTC. otherwise, it’ll be Local Time. (Z is only applicable when time is provided.)

Time parameters are optional here if you creating a date. So, if you create a date for 11^th June 2019. You can write like this:

Wait! Sorry for the interruption, there’s one more catch. If you reside in a region which is behind GMT you will get the date behind GMT:

If you reside in a region that is ahead of GMT, you will see the date as June 11th.

So, this happens because without time parameters Date object returns the date according to the UTC standard. If you want the date to be in local standard use time parameters too.

Conclusion: The whole matter of local and UTC thing can mess up the code and generate hard-to-catch errors, so the recommendation is not to create a date with the date Strings method.

2.) Passing arguments method: –

In the Date() object you can pass up to 7 arguments. Which are:

1. Year: 4-digit year.
2. Month: Month of the year (0-11). The month is zero-indexed. Defaults to 0 if left empty.

1. Day: Day of the month (1-31). Defaults to 1 if left empty.
2. Hour: Hour of the day (0-23). Defaults to 0 if left empty.
3. Minutes: Minutes (0-59). Defaults to 0 if left empty.
4. Seconds: Seconds (0-59). Defaults to 0 if left empty.
5. Milliseconds: Milliseconds (0-999). Defaults to 0 if left empty.

Many developers avoid this approach, I was also unaware of this approach before writing this blog, but this approach is quite easy and accurate.

Reading it from left to right. Arguments are blessings. (*month argument starts from 0. A.k.a. 0 for January.)

Example:

Notice here, the dates created are in Local Time.

In case you want the UTC date format. You need to pass the Date.UTC formatter. Ex.:

3.) Timestamp method: –

In JavaScript, a timestamp is the number of milliseconds elapsed since 1 January 1970. It is also called Unix epoch time.

Well, it is very rare to create dates with epoch time, but we can use it to compare dates.

4.) No arguments method: –

With no arguments passed in the Date object, returns the current date in local Time.

This is the image above; you can tell the time when I wrote this blog.

I hope you understand about the Date object and will not terrify by this cute object again.

Happy Coding