How to Convert a Date from YYYY-MM-DD to DD-MM-YYYY Format in JavaScript?

To convert a date from YYYY-MM-DD format to DD-MM-YYYY format in JavaScript, call the String.split() method to split the original date string into an array of its individual parts (year, month, day) and then concatenate these parts in reverse order using the string concatenation operator(+) to get the new date string in DD-MM-YYYY format.

For example,

// Date in YYYY-MM-DD format
const oldDate = "2023-03-21";

// Split the date string at '-' char
const arr = oldDate.split('-');

// Concatenate each part in reverse order
const newDate = arr[2]+'-'+arr[1]+'-'+arr[0];

console.log(newDate);
// Output: 👉 "21-03-2023"

Similarly, if the date string is in YYYY/MM/DD format and you want to convert it to DD/MM/YYYY format, you have to first split the original string at slash(/) character using the split() method and then join each part of the array in reverse order.

For example,

// Date in YYYY/MM/DD format
const oldDate = "2023/03/21";

// Split the date string at '/' char
const arr = oldDate.split('/');

// Concatenate each part in reverse order
const newDate = arr[2]+'/'+arr[1]+'/'+arr[0];

console.log(newDate);
// Output: 👉 "21/03/2023"

The String.split() method splits the given string into an array of substrings based on a given separator.

The separator is passed as an argument to the split() method.

For example, if you want to split the string at each comma(,), you can pass it as an argument to the split() method. The split() method then returns an array containing each substring.

// String with commas
const str = 'Apple, mango, orange';

// Split string at each comma(,)
const arr = str.split(',');

console.log(arr);
// Output: 👉 ['Apple', ' mango', ' orange']

2. Using the toLocaleDateString() Method

Another way to convert a date from YYYY-MM-DD format to DD-MM-YYYY format is to create a new Date object from the original date string using the Date() constructor and then use the toLocaleDateString() method to format the new date string in any desired format.

For example,

// Original date string in YYYY-MM-DD format
const dateStr = '2022-03-21';

// Get the date object from string
const dateObj = new Date(dateStr);

// options for formatting
const options = { day: 'numeric', month: 'numeric', year: 'numeric' };

// Get the date string in dd/mm/yyyy format
let newDateStr = dateObj.toLocaleDateString('en-GB', options); 
// "21/03/2022"

// Replace '/' with '-'
newDateStr = newDateStr.replace(/\//g, '-'); 

console.log(newDateStr);
// Output: 👉 "21-03-2022"

The toLocaleDateString() method returns a string representation of the date based on the user’s local date and time format.

You can also explicitly pass the locale and formatting options to the toLocaleDateString() method as arguments.

Here is its syntax:

dateObj.toLocaleDateString([locales [, options]])

With the help of the options object, you can easily customize the date format.

For example,

// today's date
const date = new Date();

const options = {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
};

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

console.log(dateStr);
// Output: 👉 "Tuesday, March 21, 2023"

That’s all for this article. Thanks for reading!