How to Accurately Retrieve the Current Date in JavaScript

a computer monitor sitting on top of a white desk

JavaScript, an essential tool in the web developer's arsenal, boasts a myriad of features. Among these, its capabilities with date and time stand out. In this guide, we delve deep into the methods to fetch the current date in JavaScript, and also introduce the renowned Day.js library for date handling.

Delving into JavaScript’s Date Object

JavaScript's intrinsic Date object is pivotal for representing dates and times. It is equipped with a plethora of methods and properties that facilitate operations such as retrieving the current date, date comparisons, and date formatting.

To instantiate a new Date object that signifies the current date and time, use:

JavaScript
const currentDate = new Date();
console.log(currentDate);

The new Date() constructor, when invoked without arguments, yields a new Date object that mirrors the current date and time.

Extracting the Current Date

Having procured a Date object that mirrors the current date and time, we can now dissect it to obtain specific date components.

Fetching the Current Day, Month, and Year

The following methods are instrumental:

  • getDate(): Yields the day of the month (ranging from 1-31).
  • getMonth(): Returns the month (spanning 0-11), where 0 denotes January, 1 signifies February, and so forth.
  • getFullYear(): Produces the year in a 4-digit format.

Here's a demonstration:

JavaScript
const currentDate = new Date();
const day = currentDate.getDate();
const month = currentDate.getMonth() + 1;  // Increment by 1 due to zero-based months
const year = currentDate.getFullYear();

console.log(`The date today is: ${day}-${month}-${year}`);

Determining the Current Day of the Week

The getDay() method is invaluable for this, returning the day of the week (0-6), where 0 is Sunday, 1 is Monday, and so on.

For instance:

JavaScript
const currentDate = new Date();
const dayOfWeek = currentDate.getDay();

console.log(`Today corresponds to the ${dayOfWeek}th day of the week.`);

For a more reader-friendly output, such as "Monday", employ an array of day names and fetch the appropriate name using the dayOfWeek index:

JavaScript
const currentDate = new Date();
const dayOfWeek = currentDate.getDay();
const dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

console.log(`Today is a ${dayNames[dayOfWeek]}.`);

Formatting the Date

On occasions, you might desire to present the date in a distinct format. JavaScript offers multiple methods for this endeavor.

Utilizing toLocaleDateString()

The toLocaleDateString() method returns a string that represents the date portion of the specified Date object in a language-sensitive manner. It can accept two optional parameters: the locale and an object detailing formatting options.

For instance:

JavaScript
const currentDate = new Date();
const formattedDate = currentDate.toLocaleDateString('en-US', {
  day: '2-digit',
  month: 'long',
  year: 'numeric',
});

console.log(`The date today is: ${formattedDate}`);

In this illustration, we employed the 'en-US' locale and specified our preferences for a 2-digit day, an extended month name, and a numeric year.

Leveraging Intl.DateTimeFormat()

Another alternative for date formatting is the Intl.DateTimeFormat object, which facilitates language-sensitive date and time formatting.

For example:

JavaScript
const currentDate = new Date();
const dateFormatter = new Intl.DateTimeFormat('en-US', {
  day: '2-digit',
  month: 'long',
  year: 'numeric',
});

const formattedDate = dateFormatter.format(currentDate);
console.log(`The date today is: ${formattedDate}`);

This example mirrors the output of the preceding one but employs the Intl.DateTimeFormat object for date formatting.

Engaging with Day.js

Day.js, a renowned JavaScript date library, offers a lightweight and user-friendly API for date operations. Its immutable nature ensures the original Date object remains unaltered, making it a more secure choice for date handling.

To integrate Day.js into your project, use:

JavaScript
<script src="https://cdn.jsdelivr.net/npm/dayjs/dayjs.min.js"></script>

To fetch the current date with Day.js:

JavaScript
const currentDate = dayjs();
console.log(currentDate.toString());

For formatting the date with Day.js, the format() method is invaluable:

JavaScript
const currentDate = dayjs();
const formattedDate = currentDate.format('DD-MMMM-YYYY');
console.log(`The date today is: ${formattedDate}`);

In this demonstration, the format string 'DD-MMMM-YYYY' corresponds to a 2-digit day, an extended month name, and a 4-digit year.

Frequently Asked Questions

1. How can I ascertain the current time in JavaScript?

To determine the current time, employ the following methods on a Date object:

  • getHours(): Returns the hour (0-23).
  • getMinutes(): Yields the minutes (0-59).
  • getSeconds(): Produces the seconds (0-59).

For instance:

JavaScript
const currentDate = new Date();
const hours = currentDate.getHours();
const minutes = currentDate.getMinutes();
const seconds = currentDate.getSeconds();

console.log(`The current time is: ${hours}:${minutes}:${seconds}`);

2. How can I compare dates in JavaScript?

To juxtapose dates, transform the Date objects into timestamps (milliseconds since January 1, 1970) using either the getTime() or valueOf() methods, and then compare these timestamps.

3. How can I add or subtract days, months, or years from a date?

With Day.js, the add() and subtract() methods are instrumental for this. For instance, to add 7 days to the current date, use:

JavaScript
const currentDate = dayjs();
const newDate = currentDate.add(7, 'day');
console.log(newDate.toString());

In conclusion, this guide has equipped you with diverse methods to determine the current date in JavaScript, both with the native Date object and the Day.js library. Dive in and explore further!

Author