If you are a developer who uses JavaScript, you’re going to have to format dates often. Date formatting may seem complex and overwhelming for beginners, but it is pretty simple as you will agree after reading through this article.
JavaScript’s Date() function object can easily be used to display date, time, even specific to time zones.
let date = new Date();
console.log(date);
The code above is probably the easiest, most common way the date function is used, and since I didn’t assign another function to it, the date and time will be printed in a localized format.
There are other simple date formatting methods available in JavaScript, one of which is the toLocaleDateString method.
The toLocaleDateString Method
This method lets you customize your date with a specific location of your choice and exactly the way you want it to appear. It allows you to add a locale(a language code) and an option, takes both as arguments, and gives you the time and date in your specified locale and format.
You can use the toLocaleDateString method without a locale and option. You can also use it without an option or with both a locale and an option present. The syntax for each is listed below.
toLocaleDateString()
toLocaleDateString(locales)
toLocaleDateString(locales, options)
When using locales, you need to remember the language code you want to use. For the USA, we have en-US; for the United Kingdom, we have en-UK, and it goes on like that. You can find the appropriate language code by searching it up.
Using locales only, we would have the syntax in this format:
new Date().toLocaleDateString(‘en-US’)
new Date().toLocaleDateString(‘en-UK’)
new Date().toLocaleDateString(‘zh-CN’)
However, using locales with options gives us more room to customize so the syntax is usually like this
const options = { weekday: ‘short’, year: ‘numeric’, month: ‘long’, day: ‘numeric’ };
const today = new Date();
console.log(today.toLocaleDateString(“en-UK”, options));
My preferred way of writing the same syntax is
console.log(date.toLocaleString(‘en-UK’, {
weekday: ‘short’,
day: ‘numeric’,
year: ‘numeric’,
month: ‘long’,
}));
Both ways get the job done and allow you to customize as you want to. While weekday, day, month, year are the basic options commonly used, you can also add hour, minute, and second options if you also want to customize your time.
The weekday option specifies how you want your weekday to appear. You can have it abbreviated(short) or in full(long).
The month option specifies how you want your month to appear. You can have it abbreviated(short) or in full(long).
The year, day, hour, minute, and second options are usually numeric, meaning they appear as numbers.
There are other ways to format dates, one of which is the Intl.DateTimeFormat.
This method is similar to the toLocaleDateString and I will be covering it in my next article.
I hope you found this useful. I would like to hear from you so feel free to drop a comment or connect with me via Twitter , LinkedIn , or you can check out my Github page for some cool projects.
Cover photo by Towfiqu barbhuiya on Unsplash