How to Convert a Month Number to a Month Name in JavaScript

In this article, we’re going to learn how to get the name of a month by its position in the list of the 12 months using JavaScript.

Date toLocaleString() Method

To convert a month number to a month name, create a Date object with the given month, then call the toLocaleString() method on the Date with a specified locale and options.

For example, here is how we can get January for the number 1, February for 2, March for 3, and so on:

function getMonthName(monthNumber) {
  const date = new Date();
  date.setMonth(monthNumber - 1);

  return date.toLocaleString('en-US', { month: 'long' });
}

console.log(getMonthName(1)); // January
console.log(getMonthName(2)); // February
console.log(getMonthName(3)); // March

Our getMonthName() function takes a position and returns the name of the month with that position.

The setMonth() method sets the month of a Date object to a specified number.

We used the Date toLocaleString() method to get the name of the month of the date. toLocaleString() returns a string with a language-sensitive representation of a date.

This method has two parameters:

1. locales: A string with a BCP 47 language tag, or an array of such strings. There are many locales we can specify, like en-US for US English, en-GB for UK English, and en-CA for Canadian English.
2. options: An object used to adjust the output format of the date.

In our example, we pass en-US as the language tag to use US English, and we set a value of long to the month property of the options object to display the full month name.

We can pass an empty array ([]) as the first argument to make toLocaleString() use the browser’s default locale:

function getMonthName(monthNumber) {
  const date = new Date();
  date.setMonth(monthNumber - 1);

  // Using the browser's default locale.
  return date.toLocaleString([], { month: 'long' });
}

console.log(getMonthName(1)); // January
console.log(getMonthName(2)); // February
console.log(getMonthName(3)); // March

This is good for internationalization, as the output will vary depending on the user’s preferred language.

We can specify other values apart from long for the month property. For example, we can use short to abbreviate the month names to three letters:

function getMonthName(monthNumber) {
  const date = new Date();
  date.setMonth(monthNumber - 1);

  return date.toLocaleString('en-US', { month: 'short' });
}

console.log(getMonthName(1)); // Jan
console.log(getMonthName(2)); // Feb
console.log(getMonthName(3)); // Mar

Or we can use narrow to display only the first letter:

function getMonthName(monthNumber) {
  const date = new Date();
  date.setMonth(monthNumber - 1);

  return date.toLocaleString('en-US', { month: 'narrow' });
}

console.log(getMonthName(1)); // J
console.log(getMonthName(2)); // F
console.log(getMonthName(3)); // M

Note: Using narrow could lead to ambiguity for month names that start with the same letter in the language, e.g., January, June, and July.

For more information on the options you can set for toLocaleString(), check out this page in the MDN Docs.

Intl.DateTimeFormat Object

Using the toLocaleString() means that you have to specify a locale and options each time you want a language-sensitive string. To use the same settings to format multiple dates, we can use an object of the Intl.DateTimeFormat class instead.

For example:

function getTwoConsecutiveMonthNames(monthNumber) {
  const date1 = new Date();
  date1.setMonth(monthNumber - 1);

  const date2 = new Date();
  date2.setMonth(monthNumber);

  const formatter = new Intl.DateTimeFormat('en-US', { month: 'short' });

  // Format both dates with the same locale and options
  const firstMonth = formatter.format(date1);
  const secondMonth = formatter.format(date2);

  return `${firstMonth} & ${secondMonth}`;
}

console.log(getTwoConsecutiveMonthNames(1)); // Jan & Feb
console.log(getTwoConsecutiveMonthNames(2)); // Feb & Mar
console.log(getTwoConsecutiveMonthNames(3)); // Mar & Apr

Every Crazy Thing JavaScript Does

A captivating guide to the subtle caveats and lesser-known parts of JavaScript.