When creating these web pages, you will, at some point, likely need to use dates for some reason – such as displaying when something was uploaded, stored, and so on.

How to Get Dates in JavaScript

In JavaScript, you use either the new Date() or Date() constructor to get your dates (either current date or a specific date). The new Date() constructor returns a new Date object, while the Date() constructor returns a string representation of the current date and time.

let stringDate = Date();
console.log(stringDate); // "Tue Aug 23 2022 14:47:12 GMT-0700 (Pacific Daylight Time)"
 
let objectDate = new Date();
console.log(objectDate); // Tue Aug 23 2022 14:47:12 GMT-0700 (Pacific Daylight Time)

These full format dates comprise the day, month, year, minute, hour, and other information you don't need all the time. Your primary concern is to see how you can format these date values to return dates in readable formats, which you can embed on your web page for everyone to understand.

How to Format Dates in JavaScript

Formatting dates depends on you and your needs. In some countries, the month comes before the day, then the year (06/22/2022). In others, the day comes before the month, then the year (22/06/2022), and lots more. Regardless of the format, you want to break down the date object value and get the necessary information you want for your web page. This is possible with the JavaScript date methods. There are many of these methods, but since you are only concerned with dates in this article, you will only need three of them:

• getFullYear() – You will use this method to get the year as a four-digit number (yyyy). For example, 2022.
• getMonth() – You will use this method to get the month as a number between 0-11, with each number representing the months from January to December. For example, 2 will be the index for March since it's zero-based indexing (meaning it starts from 0).
• getDate() – You will use this method to get the day as a number between 1-31 (this is not an index, but the exact day value, so it starts from 1 not 0). Note: These methods can only be applied or will only work with the new Date() constructor, which returns a date object.

let objectDate = new Date();
 
let day = objectDate.getDate();
console.log(day); // 23
 
let month = objectDate.getMonth();
console.log(month + 1); // 8
 
let year = objectDate.getFullYear();
console.log(year); // 2022

You will notice that 1 is added to the month value above. This is because the month is 0 indexed. The value starts from 0. This means 7 will mean August instead of 8. At this point, you have been able to extract all date values from the date object. You can now organize them in whatever format you desire:

let format1 = month + '/' + day + '/' + year;
console.log(format1); // 7/23/2022
 
let format2 = day + '/' + month + '/' + year;
console.log(format2); // 23/7/2022
 
let format3 = month + '-' + day + '-' + year;
console.log(format3); // 7-23-2022
 
let format4 = day + '-' + month + '-' + year;
console.log(format4); // 23-7-2022

In the above, you concatenated the values using the plus operator. You can also make use of template literals to concatenate:

let format1 = `${month}/${day}/${year}`;
console.log(format1); // 7/23/2022
 
let format2 = `${day}/${month}/${year}`;
console.log(format2); // 23/7/2022
 
let format3 = `${month}-${day}-${year}`;
console.log(format3); // 7-23-2022
 
let format4 = `${day}-${month}-${year}`;
console.log(format4); // 23-7-2022

Now, you have seen the possible ways you may want to format your date. Another scenario can be if you want the month and day value to be preceded by 0 if it's a single numeric value (from 1-9). To do this, you would need to add a condition to handle this before formatting your dates:

if (day < 10) {
  day = '0' + day;
}
 
if (month < 10) {
  month = `0${month}`;
}
 
let format1 = `${month}/${day}/${year}`;
console.log(format1); // 07/23/2022