Are you going to use the Date in your Website or JavaScript application? In this article, you will learn how to format A Date in JavaScript.
Suppose you have a string of dates that you want to change to something like day, month, and year. You can use the DateTimeFormat method present in the standard built-in objects of JavaScripts.
Let us see in the below example codes how you can format the date in JavaScript using different methods available.
1. Using the DateTimeFormat Method to format a Date in JavaScript
In Javascript standard libraries you will find the Standard Built-in Objects named as DateTimeFormat[1]. This method allows language-sensitive date and time formatting.
Using this method you can specify the language locale you want to use while formatting the date or set a default language if the provided language is somehow not present in the list.
Let us see in the below example code the usage of DateTimeFormat to format a date in JavaScript.
//Initializing the Date
let givenDate = new Date()
//Using the DateTimeFormat Method
let dateFormatted = new Intl.DateTimeFormat('en', { day: '2-digit',month: 'short', year: 'numeric'}).format(givenDate)
//Printing the Formatted Date
console.log(dateFormatted)
Output:
Dec 11, 2021As you received the formatted date you can then split this string to print in the format you like. Suppose you want to format the date in the dd-mmm-yyyy format then you can use the below code to get the date in this format using JavaScript.
//Initializing the Date
let givenDate = new Date()
//Using the DateTimeFormat Method
let dateFormatted = new Intl.DateTimeFormat('en', { day: '2-digit',month: 'short', year: 'numeric'}).format(givenDate)
let dateList = dateFormatted.split(' ')
var newFormatterDate = dateList[1].replace(',', '') + '-' + dateList[0] + '-' + dateList[2]
//Printing the Formatted Date
console.log(newFormatterDate)
Output:
11-Dec-2021As you can see using the above code, I was able to successfully convert the current date in the format of dd-mmm-yyyy. Since in the above code after day it prints a ‘,’ and I have used the replace method to remove the ‘,’ from the day string.
2. Using getDate, getMonth, and getFullYear method to Format a Date In JavaScript
Another method that you can use to format the dates in your desired format is getting all the day, month, and year strings separately from the date and joining them or concatenating them to the desired date format you want. Now suppose you want your date to be formatted in the mm/dd/yyyy format then use the below code that I have written to format the date.
Let us see in the below example code to format a date in JavaScript using the getDate, getMonth, and getFullYear method.
//Initializing the Date
let givenDate = new Date()
//Using the DateTimeFormat Method
var dayString = givenDate.getDate()
var monthString = givenDate.getMonth() + 1 //Since it start from 0 to 11
var yearString = givenDate.getFullYear()
//Using the above data to Format Date
var formattedDate = monthString + "/" + dayString + "/" + yearString
console.log("The New Formatted Date is : " + formattedDate)
Output:
The New Formatted Date is : 12/11/2021As you can see using the above code I was able to get the current date, month, and year using the getDate(), getMonth(), and getFullYear() method. And then I used this independent string to concatenate this to get the required formatted date I wanted to.
Wrap Up
I hope you were able to format your current date in JavaScript as you wished. As I have listed around two methods that you can use to format your date comfortably for your JavaScript application.
Please let me know in the comment section if you know any better method than the one discussed above. I will be happy to add it here.
If you liked the above tutorial then please follow us on Facebook and Twitter. Let us know the questions and answer you want to cover in this blog.
Further Read:
