Tutorial

Exploring the JavaScript Date Object

Published on December 6, 2017
author

Alligator.io

Exploring the JavaScript Date Object

There are some great libraries out there to deal with dates in JavaScript, with Moment.js and date-fns being perhaps the two most popular. It’s very common however to have just some basic needs for playing with dates and using a library instead of the native JavaScript date object would be overkill. Let’s therefore explore what we can do natively using the date object.

Creating Date Objects

Creating a new date instance is as easy as newing up a date object.

Without arguments, we get the current date and time in the local timezone:

const now = new Date();

console.log(now); // Wed Dec 06 2017 18:30:55 GMT-0800 (PST)

Milliseconds Since Unix Epoch

You can also pass-in an integer for a date object that’s X amount of milliseconds after January 1st 1970 UTC:

const latter = new Date(4000000000);

console.log(latter); // Sun Feb 15 1970 23:06:40 GMT-0800 (PST)

Date String

You can also alternatively create a date object by passing a string:

const summerOf95 = new Date("1995-06-28");

// or, with a full date string that also includes the time and the time zone. Note here that `Z` is for UTC timezone:
const december31st = new Date("1999-12-31T02:56:03.392Z");

Date Components

Finally, you can create a date object in your local timezone using separate component argument:

const someDate = new Date(2000, 5, 20, 16, 34, 12, 24);

console.log(someDate); // Tue Jun 20 2000 16:34:12 GMT-0700 (PDT)

Notice how the months are zero-based, and 5 therefore represents June. Components for time can be omitted and 0 will be assumed:

const someDate = new Date(2000, 5, 20, 16, null, 12, 24);

console.log(someDate); // Tue Jun 20 2000 16:00:12 GMT-0700 (PDT)

If you’re confused by the date returned when console logging a date object, remember that most browsers output the time in your local timezone.

Timestamps

Get a timestamp (number of milliseconds since Jan 1st 1970 UTC) using a date instance’s getTime method:

const nowTimestamp = new Date().getTime();

console.log(nowTimestamp); // 1512616153783

Timestamp for now

In the above example, we’re getting the timestamp for now. This is so common that JavaScript now has a method to get just that more easily:

const nowTimestamp = Date.now();

console.log(nowTimestamp); // 1512616153783

Timestamps are useful to easily calculate the difference in milliseconds between two dates. For example, here we get the difference in milliseconds between Feb 3rd 1996 and Jan 1 1970:

const diff = new Date("1995-02-03").getTime() - new Date(0).getTime();

In the above case, you can ommit the call to getTime and the dates will automatically be coerced to timestamps:

const diff = new Date("1995-02-03") - new Date(0);

Human Readable Strings

Date object instances also give us a few useful methods to get human-friendly string representations. The toDateString, toTimeString, toLocaleDateString, toLocaleString, toLocaleTimeString and toUTCString methods are the most useful ones, and demonstrated in the following example:

const now = new Date();

console.log(now.toDateString()); // Wed Dec 06 2017
console.log(now.toTimeString()); // 19:23:42 GMT-0800 (PST)
console.log(now.toLocaleDateString()); // 12/6/2017
console.log(now.toLocaleString()); // 12/6/2017, 7:20:28 PM
console.log(now.toLocaleTimeString()); // 7:20:51 PM
console.log(now.toUTCString()); // Thu, 07 Dec 2017 03:21:14 GMT

Getting Date or Time Components

You can get specific date/time components from a date instance using the following methods:

  • getFullYear(): The year, using 4 digits.
  • getDate(): The day of the month (e.g: 31).
  • getMonth(): A zero-based integer for the month (e.g: 0 for January).
  • getDay(): The index for the day of the week from 0 for Sunday up to 6 for Saturday.
  • getHours(): The hour of the day.
  • getMinutes(): The minutes.
  • getSeconds(): The seconds.
  • getMilliseconds(): The milliseconds.

Here’s a simple example:

const now = new Date();

console.log(`It's ${now.getHours()}:${now.getMinutes()} o'clock`);
// It's 19:34 O'Clock

Note that all the above methods return date/time components in the local timezone. Each method has an equivalent so that UTC date/time is returned instead (e.g: getUTCMinutes()).

Setting Date or Time Components

Similar to how we can get date/time components, we can also set them using analogous methods:

const now = new Date();

now.setFullYear(2049);

console.log(now.toLocaleString()); // 12/6/2049, 7:40:04 PM

Note that there’s a shortcut where most of the set methods can take multiple arguments to set the other components. These two snippets produce the same result:

The tedious way
const now = new Date();


The shortcut
const now = new Date();


Adding/Subtracting Time

Using a combination of the get and set methods, you can add to or subtract from the date/time components of a date instance. Here for example, we add 15 minutes to the current time:

const now = new Date();

console.log(now.toLocaleTimeString()); // 7:47:53 PM

now.setMinutes(now.getMinutes() + 15);

console.log(now.toLocaleTimeString()); // 8:02:53 PM

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Alligator.io

author

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
1 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Become a contributor for community

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

DigitalOcean Documentation

Full documentation for every DigitalOcean product.

Resources for startups and SMBs

The Wave has everything you need to know about building a business, from raising funding to marketing your product.

Get our newsletter

Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

New accounts only. By submitting your email you agree to our Privacy Policy

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.