Change the format of date in JavaScript (All possible formats)

In this tutorial, we will learn how to change the format of date in JavaScript (All possible formats).

As a developer, you should display the current date in any format required by your project. Thus I will show examples of each and every possible date format in this tutorial.

Changing the format of date in JavaScript

Variables used in code

• date –  new Date() object in js

const date = new Date()

The simplest method of displaying the date. We can easily demonstrate this with the code below.

console.log(date.toDateString())

Output:

Wed Feb 26 2022

 

Method 1

To change the date format, we use the toLocaleString() method passing locale and custom options to it.

Parameters

• locale – A locale is a string made up of a language subtag, a country subtag, and a country subtag. Ex: ‘en-in’ for (English-India).
• options – It is a dictionary containing weekday, day, month, year as keys. Numeric values for the day and year should be used. Weekday values should be either long or short. The month values should be numeric, long, or short.

The longest form of the category is long. The shortest form of the category is short, and the number form of the category is numeric.

Printing the date in “DD/MM/YYYY” format

let format = {day:'numeric', month:'numeric', year:'numeric'}
console.log(date.toLocaleString('en-in',format))

Output

26/2/2022

Printing the date in the short format which is DD MTH YYYY

let format = {day:'numeric', month:'short', year:'numeric'}
console.log(date.toLocaleString('en-in',format))

Output

26 Feb 2022

Printing the date in the long format which is DD Month YYYY

let format = {day:'numeric', month:'long', year:'numeric'}
console.log(date.toLocaleString('en-in',format))

Output

26 February 2022

Printing the date in numeric format along with weekday

let format = {weekday:'short', day:'numeric', month:'long', year:'numeric'}
console.log(date.toLocaleString('en-in',format))

Output

Sat, 26/2/2022

Printing the longest format along with weekday

let format = {weekday:'long', day:'numeric', month:'long', year:'numeric'}
console.log(date.toLocaleString('en-in',format))

Output

Saturday, 26 February, 2022

 

Method 2

To format the date, we are going to use the custom dateFormat function.

function dateFormat(date,sep,list){
    let res = ""
    for(let i = 0; i < 3; i++){
        if(list[i].toLowerCase() === 'dd'){
    	    if (date.getDate() < 10){
      	        res += '0'
            }
            res += date.getDate()
        }
        else if(list[i].toLowerCase() === 'mm'){
            if (date.getMonth()+1 < 10){
                res += '0'
            }
            res += date.getMonth() + 1
        }
        else if(list[i].toLowerCase() === 'yyyy' || list[i].toLowerCase() === 'yy'){
    	    res += date.getFullYear().toString().slice(-list[i].length)
        }
        else{
    	    return "Invalid argument"+list[i]
        }
        if(i<2){
    	    res += sep
        }
    }  
    return res
}

Arguments to pass

• date – Date() object
• sep – separator string
• list – Array of dd, mm, yyyy/yy strings in a custom order.

Printing the date in “YYYY-MM-DD” format

console.log(dateFormat(date,'-',['yyyy','mm','dd']))

Output

2022-02-26

Printing the date in “DD/MM/YY” format

console.log(dateFormat(date,'/',['DD','MM','YY']))

Output

26/02/22