Date Formatting in JavaScript: Converting Dates to Different Formats with Examples

Working with dates in JavaScript can be a bit tricky, especially when it comes to formatting them in different ways. In this blog post, we'll explore how to convert JavaScript dates into different formats of date, month, and year, specifying both full and short names of months and days, using examples with clear and concise language.

JavaScript's built-in Date object provides a number of methods that make working with dates easier. However, it can be difficult to remember the exact syntax needed to format dates in a particular way. Here are some common formats you may encounter when working with dates:

dd/mm/yyyy - day/month/year

mm/dd/yyyy - month/day/year

yyyy-mm-dd - year/month/day

To format a date in a particular way, we can use the toLocaleDateString() method. This method takes two arguments: a locale and an options object. The locale specifies the language and region to use for formatting, while the options object specifies the specific formatting options.

1) Format date as "dd/mm/yyyy" with short month name

To format a date as "dd/mm/yyyy" (day/month/year) with the short name of the month, we can use the following code:

const date = new Date();

const options = { day: '2-digit', month: 'short', year: 'numeric' };

const formattedDate = date.toLocaleDateString('en-GB', options);

console.log(formattedDate);

In this code, we create a new Date object to represent the current date and time. We then specify the options object with day: '2-digit', month: 'short', and year: 'numeric'. This tells JavaScript to format the date with two-digit values for the day, the short name of the month (e.g. "Jan"), and the full year. The resulting output should be a string in the format "dd/MM/yyyy".

2) Format date as "mm/dd/yyyy" with full month name

To format a date as "mm/dd/yyyy" (month/day/year) with the full name of the month, we can use the following code:

const date = new Date();

const options = { month: 'long', day: '2-digit', year: 'numeric' };

const formattedDate = date.toLocaleDateString('en-US', options);

console.log(formattedDate);

In this code, we use the en-US locale to specify that we want the date formatted for English speakers in the United States. We then specify month: 'long', day: '2-digit', and year: 'numeric' to format the date with the full name of the month (e.g. "January"), two-digit values for the day, and the full year. The resulting output should be a string in the format "January 01, 2022".

3) Format date as "yyyy-mm-dd" with full day name

To format a date as "yyyy-mm-dd" (year/month/day) with the full name of the day, we can use the following code:

const date = new Date();

const options = { year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'long' };

const formattedDate = date.toLocaleDateString('sv-SE', options);

console.log(formattedDate);

In this code, we use the sv-SE locale to specify that we want the date formatted for Swedish speakers in Sweden. We then specify year: 'numeric', month: '2-digit', day: '2-digit', and weekday: 'long' to format the date accordingly. 

4) Format date as "dd Mmm yyyy"

To format a date as "dd Mmm yyyy" (e.g. 03 Sept 2022), we can use the following code:

const date = new Date();

const options = { day: '2-digit', month: 'short', year: 'numeric' };

const formattedDate = date.toLocaleDateString('en-US', options);

console.log(formattedDate); // "28 Mar 2023"

In this code, we create a new Date object to represent the current date and time. We then specify the options object with day: '2-digit', month: 'short', and year: 'numeric'. This tells JavaScript to format the date with two-digit values for the day, the short name of the month (e.g. "Sept"), and the full year. The resulting output should be a string in the format "dd Mmm yyyy".

5) Format date as "dd Month yyyy"

To format a date as "dd Month yyyy" (e.g. 03 September 2022), we can use the following code:

const date = new Date();

const options = { day: '2-digit', month: 'long', year: 'numeric' };

const formattedDate = date.toLocaleDateString('en-US', options);

console.log(formattedDate); // "28 March 2023"

 In this code, we again create a new Date object to represent the current date and time. We then specify the options object with day: '2-digit', month: 'long', and year: 'numeric'. This tells JavaScript to format the date with two-digit values for the day, the full name of the month (e.g. "September"), and the full year. The resulting output should be a string in the format "dd Month yyyy".

6) Format date as "Dd Mmm yyyy"

To format a date as "Dd Mmm yyyy" (e.g. Mon 28 Mar 2023), we can use the following code:

const date = new Date();

const options = { weekday: 'short', day: '2-digit', month: 'short', year: 'numeric' };

const formattedDate = date.toLocaleDateString('en-US', options);

console.log(formattedDate); // "Mon 28 Mar 2023"

In this code, we create a new Date object to represent the current date and time. We then specify the options object with weekday: 'short', day: '2-digit', month: 'short', and year: 'numeric'. This tells JavaScript to format the date with the short name of the weekday (e.g. "Mon"), two-digit values for the day, the short name of the month, and the full year. The resulting output should be a string in the format "Dd Mmm yyyy".