Search for a command to run...
JavaScript Date object is vast. Sometimes the methods are confusing, like the getMonth() method. Let's learn to get the month name in the best way.
Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human
I have had some past encounters with the Date API in past when doing some calendar stuff and it can get messy. Even though now unmaintained, I have found moment still being a quick and easy way to get the desired formatted date with relative and locale data being consistent. Do you have any recommendations for new Date libraries that you have encountered or do you think JavaScript Internationalization API standard itself would be enough going forward to use instead of other libraries when used in production apps ?
Hey Lakshya Thakur, yes! The JavaScript Internationalization API has huge potential. In fact, the best method shown in the article uses the same API internally(dateTimeFormat) method.
You should also look into the Temporal API.. that's in stage 3 of the proposal now.
That's great. 👏
Traditional SSR is great, but it has a massive buffering problem. Let's look into the SSR Streaming and learn how it could be a game changer.
Learn how to build maintainable, reusable forms in React using design patterns like custom hooks, compound components, and context for scalable CRUD
Learn how JavaScript variables work, including let vs const, primitive and reference types, pass by value, and how JavaScript stores data in memory.
A beginner-friendly introduction to JavaScript covering what it is, how it works, and how to set up your JavaScript environment
Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.
GreenRoots Blog - A Blog by Tapas Adhikary
186 posts
Educator | YouTuber | Building ReactPlay | Let's Connect
JavaScript Date object provides many helpful methods for dealing with date and time. The list is so vast that it is sometimes hard for developers to track which method provides what value. Also, it is a bit tricky to retrieve a few information straightforwardly. Getting a month's name from a date is undoubtedly such an area of confusion.
This short article will teach you how to get the month name from a date in the most straightforward way with a few added advantages. JavaScript Date object provides a method called getMonth() to return you the information of the month part in a date.
However, it doesn't return a human-readable month name, like January, February, etc., from the English calendar. Instead, it returns an integer number corresponding to a month like 0 for January, 1 for February, and so on.
So, if you are running the following code in the month of September, the value 8 will be printed in the console.
const month = new Date().getMonth();
console.log(month);
Now, how can this number be converted into a human-readable month name? What's the best way?
The most obvious way to solve it is by using a if-else or a switch-case statements. It works, but it's too much of a condition and code. On any day, we must avoid a code like this to get a month name from the integer returned by the getMonth() method of the JavaScript Date object.
// DON'T DO THIS...
switch(num) {
case 0:
month="January";
break;
case 1:
month="February";
break;
case 2:
month="March";
break;
// ...
// Skipping the other ones to keep it short.
// ...
case 9:
month="October";
break;
case 10:
month="November";
break;
case 11:
month="December";
break;
default:
month="Invalid month";
}
So, do we have a better way? Indeed, we do. But before that, let's see another not-so-great way many developers try out.
Yes, we certainly can. How about creating an array of English month names like this:
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
After that, use that array to return a month name based on the index number passed to it. For example, if we execute the code below in the month of September, the new Date().getMonth() will return 8, and months[8] will be September.
const monthName = months[new Date().getMonth()];
Problem solved? Yes! But there is a catch, my friend.
The month name September may not be the same in other languages and locales. For example, in French, it is septembre. How do we handle that? Another array with Frech month names? Well, that won't be scalable as many locales and languages are worldwide!
toLocaleString() methodThe toLocaleString() of the JavaScript Date object returns a string with the locale-aware representation of the date. It means you don't have to maintain(even know) the month names of different locales in your code.
The code snippet below will get you the month's full name in your browser's default language/locale. For example, if you are running this code on en-US locale in the month of September, you will get September as the output.
const today = new Date();
// Getting full month name (e.g. "September")
const month = today.toLocaleString('default', { month: 'long' });
console.log(month);
How about in French, then? Oh! That's easy. Just pass the French locale(fr-FR) instead of default to get the job done. The output of the following code will be septembre if you run it on that month.
const today = new Date();
// Getting full month name (e.g. "September")
const month = today.toLocaleString('fr-FR', { month: 'long' });
console.log(month);
Please note: The
toLocaleStringmethod internally calls theIntl.DateTimeFormatAPI for enabling locale-aware date-time formatting. You can read more about it here.
Liked it? Great. You can explore further about the Date object from here.
By the way, I have also created a YouTube short on the same topic on my channel, tapaScript. Do you want to check it out?
That's all. Thanks for reading it. I hope it was insightful. If you liked the tutorial, please post likes and share it in your circles.
Let's connect. I share web development, content creation, Open Source, and career tips on these platforms.