Object-Oriented JavaScript — Date

John Au-Yeung - Jan 24 '21 - - Dev Community

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at the Date object.

Date

The Date constructor lets us create date objects.

We can create a new Date instance by passing in nothing, a date string, values for day, month, time, etc., or a timestamp.

For instance, to create the date with the current date, we can write:

new Date();
Enter fullscreen mode Exit fullscreen mode

Also, we can pass in a date string:

new Date('2020 1 1');
Enter fullscreen mode Exit fullscreen mode

and we get:

Wed Jan 01 2020 00:00:00 GMT-0800 (Pacific Standard Time)
Enter fullscreen mode Exit fullscreen mode

or:

new Date('1 1 2020');
Enter fullscreen mode Exit fullscreen mode

and we get:

Wed Jan 01 2020 00:00:00 GMT-0800 (Pacific Standard Time)
Enter fullscreen mode Exit fullscreen mode

Or:

new Date('1 jan 2020');
Enter fullscreen mode Exit fullscreen mode

and we get:

Wed Jan 01 2020 00:00:00 GMT-0800 (Pacific Standard Time)
Enter fullscreen mode Exit fullscreen mode

The Date constructor can figure out the date from different strings.

We can also pass in numeric values to the the Date constructor to represent the:

  • year
  • month, with 0 representing January to 11 for December
  • day — 1 to 31
  • hour — 0 to 23
  • minutes — 0 to 59
  • seconds — 0 to 59
  • milliseconds — 0 to 999

For example, we can write:

new Date(2020, 0, 1, 17, 05, 03, 120);
Enter fullscreen mode Exit fullscreen mode

And we get:

Wed Jan 01 2020 17:05:03 GMT-0800 (Pacific Standard Time)
Enter fullscreen mode Exit fullscreen mode

If we pass in a number that’s out of range, it’ll be adjusted to be in range.

For instance, if we have:

new Date(2020, 11, 32, 17, 05, 03, 120);
Enter fullscreen mode Exit fullscreen mode

Then we get:

Fri Jan 01 2021 17:05:03 GMT-0800 (Pacific Standard Time)
Enter fullscreen mode Exit fullscreen mode

We can also pass in a timestamp.

For instance, we can write:

new Date(1557027200000);
Enter fullscreen mode Exit fullscreen mode

And we get:

Sat May 04 2019 20:33:20 GMT-0700 (Pacific Daylight Time)
Enter fullscreen mode Exit fullscreen mode

If we called Date without new , then we get a string representing the current date.

It doesn’t matter whether we pass in the parameters.

So if we have:

Date();
Enter fullscreen mode Exit fullscreen mode

We get:

"Mon Aug 03 2020 15:02:32 GMT-0700 (Pacific Daylight Time)"
Enter fullscreen mode Exit fullscreen mode

Date Methods

We can adjust the date with some instance methods.

For instance, we can use getMonth(), setMonth(), getHours(), setHours(), etc. to set the parts of a date.

To return a string, we call toString :

const d = new Date(2020, 1, 1);  
d.toString();
Enter fullscreen mode Exit fullscreen mode

Then we get:

"Sat Feb 01 2020 00:00:00 GMT-0800 (Pacific Standard Time)"
Enter fullscreen mode Exit fullscreen mode

To set the month, we call setMonth :

d.setMonth(2)
Enter fullscreen mode Exit fullscreen mode

This returns the new timestamp:

1583049600000
Enter fullscreen mode Exit fullscreen mode

To get a human-readable date, we can call toString :

d.toString();
Enter fullscreen mode Exit fullscreen mode

and get:

"Sun Mar 01 2020 00:00:00 GMT-0800 (Pacific Standard Time)"
Enter fullscreen mode Exit fullscreen mode

We can get the timestamp of a date with Date.UTC :

Date.UTC(2029, 0, 1);
Enter fullscreen mode Exit fullscreen mode

And we can pass that into the Date constructor:

new Date(Date.UTC(2029, 0, 1))
Enter fullscreen mode Exit fullscreen mode

The now method also returns the current timestamp, so we write:

Date.now();
Enter fullscreen mode Exit fullscreen mode

and we get:

1596492422408
Enter fullscreen mode Exit fullscreen mode

We can do the same with valueOf or the + operator:

new Date().valueOf();  
+new Date();
Enter fullscreen mode Exit fullscreen mode

and they both return the current timestamp.

Conclusion

Dates can be manipulated with the Date constructor with JavaScript.

We can convert between timestamps, date objects, and string.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .