Convert Month number to Month name using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Convert Month number to Month name using JavaScript #

To convert a month number to a month name:

  1. Create a Date object with a date in the given month.
  2. Use the toLocaleString() method to get the name of the month for the date.
  3. The method will return the name of the month according to the provided locale.
index.js
function toMonthName(monthNumber) { const date = new Date(); date.setMonth(monthNumber - 1); return date.toLocaleString('en-US', { month: 'long', }); } console.log(toMonthName(1)); // 👉️ "January" console.log(toMonthName(2)); // 👉️ "February" console.log(toMonthName(3)); // 👉️ "March"

We created a reusable function that takes a month number and returns the name of the month.

The Date() returns a Date object.

The setMonth takes a zero-based value for the month and sets the value for the given date.

Note that the method takes a zero-based value. For example, January is 0, February is 1, March is 2, etc.

This is why we had to subtract 1 from the passed in month value.

We used the Date.toLocaleString method to get the name of the month for the date.

The two arguments we passed to the toLocaleString method are:

  1. locales - a string with a BCP 47 language tag or an array of such strings. You can use any of the available locales, e.g. en-US for the US, es-MX for Mexico or en-CA for Canada. If you need more information about this parameter, check out the MDN docs.
  2. options - an object where we can adjust the formatting of the date. Read more about the options object in the MDN docs.

In used the en-US locale in the example. If you want to use the visitor's default locale, pass an empty array for the parameter.

index.js
function toMonthName(monthNumber) { const date = new Date(); date.setMonth(monthNumber - 1); // 👇️ using visitor's default locale return date.toLocaleString([], { month: 'long', }); } console.log(toMonthName(1)); // 👉️ "January" console.log(toMonthName(2)); // 👉️ "February" console.log(toMonthName(3)); // 👉️ "March"
When the visitor's default locale is used, the output will vary depending on the user's preferred language.

You can also specify different values for the month property in the options object. Here is an example that returns the short name of the month (first 3 letters).

index.js
function toMonthName(monthNumber) { const date = new Date(); date.setMonth(monthNumber - 1); return date.toLocaleString('en-US', { month: 'short', }); } console.log(toMonthName(1)); // 👉️ "Jan" console.log(toMonthName(2)); // 👉️ "Feb" console.log(toMonthName(3)); // 👉️ "Mar"

Another possible value for the month property is narrow. It only returns the first letter of the month name, e.g. J for January.

However, the narrow representation may return the same letter for multiple months in some locales. For example, in english - January, June and July would all return the letter J.
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.