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
Leave a Reply