Convert Month number to Month name and vice versa in JS

# Table of Contents

# Convert Month number to Month name using JavaScript

To convert a month number to a month name:

Create a Date object with a date in the given month.
Use the toLocaleString() method to get the name of the month for the date.
The method will return the name of the month according to the provided locale.

index.js

Copied!
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"

convert month number to month name

The code for this article is available on GitHub

The function takes a number as a parameter and returns the name of the month.

The Date() returns a Date object.

The setMonth() method 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 toLocaleString() method to get the name of the month for the date.

The two arguments we passed to the toLocaleString method are:

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.
options - an object where we can adjust the formatting of the date. Read more about the options object in the MDN docs.

# Using the visitor's default locale

We 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

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

  // 👇️ using the visitor's default locale
  return date.toLocaleString([], {
    month: 'long',
  });
}

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

using visitors default locale

The code for this article is available on GitHub

When the visitor's default locale is used, the output will vary depending on the user's preferred language.

# Specifying different properties in the `options` object

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

Copied!
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"

specifying different properties in options object

The code for this article is available on GitHub

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.

# Convert Month number to Month name using Intl.DateTimeFormat

You can also use the Intl.DateTimeFormat class to convert a month number to a month name.

index.js

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

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

  return formatter.format(date);
}

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

convert month number to month name using intl datetimeformat

The code for this article is available on GitHub

The toLocaleString() method calls the Intl.DateTimeFormat API under the hood.

The Intl.DateTimeFormat() constructor creates an Intl.DateTimeFormat object that enables language-sensitive date and time formatting.

The Intl.DateTimeFormat() constructor returns an object on which we can call the format() method.

The format() method formats a date according to the locale and the supplied formatting options.

The Intl.DateTimeFormat() constructor can also be passed an options object and supports the same properties and values as the toLocaleString() method.

The Intl.DateTimeFormat() class is useful when you need to reuse the same formatted to get multiple dates.

index.js

Copied!
function getConsecutiveMonthNames(monthNumber) {
  const date1 = new Date();
  date1.setMonth(monthNumber - 1);

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

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

  const month = formatter.format(date1);
  const nextMonth = formatter.format(date2);

  return `${month} ${nextMonth}`;
}

// 👇️ January February
console.log(getConsecutiveMonthNames(1));

// 👇️ February March
console.log(getConsecutiveMonthNames(2));

// 👇️ March April
console.log(getConsecutiveMonthNames(3));

The benefit of using the Intl.DateTimeFormat() class is that we can reuse the options object in multiple calls to the format() method.

# Get a Month Number from a Month Name in JavaScript

To get a month number from a month name:

Use the new Date() constructor to create a Date object in the specified month.
Use the getMonth() method to get a zero-based value for the month and add 1 to the result.

index.js

Copied!
function getMonthNumberFromName(monthName) {
  const year = new Date().getFullYear();
  return new Date(`${monthName} 1, ${year}`).getMonth() + 1;
}

console.log(getMonthNumberFromName('January')); // 👉️ 1
console.log(getMonthNumberFromName('February')); // 👉️ 2
console.log(getMonthNumberFromName('March')); // 👉️ 3
console.log(getMonthNumberFromName('April')); // 👉️ 4
console.log(getMonthNumberFromName('May')); // 👉️ 5

get month number from month name

The code for this article is available on GitHub

We used the Date() constructor to create a date object based on the specified month.

The function takes the name of a month, e.g. January and returns the corresponding number.

The Date() constructor can be called with a string, such as January 1, 2023 and returns a new Date object that stores the specified date.

index.js

Copied!
// 👇️ January 1st 2023
console.log(new Date('January 1, 2023'));

The Date.getMonth method returns the month of the specified date as a zero-based value (0 = January, 1 = February, etc.).

index.js

Copied!
console.log(new Date('January 1, 2023').getMonth()); // 👉️ 0
console.log(new Date('February 1, 2023').getMonth()); // 👉️ 1
console.log(new Date('December 1, 2023').getMonth()); // 👉️ 11

We have to add 1 to the output of the method to account for the fact that it returns a zero-based month.

index.js

Copied!
// 👇️ 1
console.log(new Date('January 1, 2023').getMonth() + 1);

// 👇️ 2
console.log(new Date('February 1, 2023').getMonth() + 1);

// 👇️ 12
console.log(new Date('December 1, 2023').getMonth() + 1);

You can also pass a 3-letter abbreviation of a month's name to the function.

index.js

Copied!
function getMonthNumberFromName(monthName) {
  const year = new Date().getFullYear();
  return new Date(`${monthName} 1, ${year}`).getMonth() + 1;
}

console.log(getMonthNumberFromName('Jan')); // 👉️ 1
console.log(getMonthNumberFromName('Feb')); // 👉️ 2
console.log(getMonthNumberFromName('Mar')); // 👉️ 3
console.log(getMonthNumberFromName('Apr')); // 👉️ 4
console.log(getMonthNumberFromName('May')); // 👉️ 5

The Date() constructor is able to parse the specified short name without any issues.

Note that the Date() constructor returns NaN if it is unable to parse the specified string.

index.js

Copied!
function getMonthNumberFromName(monthName) {
  const year = new Date().getFullYear();
  return new Date(`${monthName} 1, ${year}`).getMonth() + 1;
}

console.log(getMonthNumberFromName('ASDF')); // 👉️ NaN

One way to get around this is to define an object that maps month names to month numbers.

# Get a Month Number from a Month Name using an object

Create an object that contains the month names as keys and the month numbers as values.

You can then use bracket notation [] to get a month's number by a month's name.

index.js

Copied!
const monthsShort = {
  Jan: '01',
  Feb: '02',
  Mar: '03',
  Apr: '04',
  May: '05',
  Jun: '06',
  Jul: '07',
  Aug: '08',
  Sep: '09',
  Oct: '10',
  Nov: '11',
  Dec: '12',
};
console.log(monthsShort['Aug']); // 👉️ 08

const monthsLong = {
  January: '01',
  February: '02',
  March: '03',
  April: '04',
  May: '05',
  June: '06',
  July: '07',
  August: '08',
  September: '09',
  October: '10',
  November: '11',
  December: '12',
};
console.log(monthsLong['August']); // 👉️ 08

The code for this article is available on GitHub

We created 2 objects that store the names of the months as keys and the numbers of the months as values.

The examples include both a 3-letter abbreviation for the month names and the full name of each month.

You can use bracket notation [] to get the month number for a specific month name.

index.js

Copied!
const monthsShort = {
  Jan: '01',
  Feb: '02',
  Mar: '03',
  Apr: '04',
  May: '05',
  Jun: '06',
  Jul: '07',
  Aug: '08',
  Sep: '09',
  Oct: '10',
  Nov: '11',
  Dec: '12',
};
console.log(monthsShort['Aug']); // 👉️ 08
console.log(monthsShort['Jan']); // 👉️ 01
console.log(monthsShort['Feb']); // 👉️ 02

const monthsLong = {
  January: '01',
  February: '02',
  March: '03',
  April: '04',
  May: '05',
  June: '06',
  July: '07',
  August: '08',
  September: '09',
  October: '10',
  November: '11',
  December: '12',
};
console.log(monthsLong['August']); // 👉️ 08
console.log(monthsLong['January']); // 👉️ 01
console.log(monthsLong['February']); // 👉️ 02

The benefit of using these predefined objects is that your IDE can assist you with autocompletion once you start typing the name of a key.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Convert Month number to Month name and vice versa in JS

# Table of Contents

# Convert Month number to Month name using JavaScript

# Using the visitor's default locale

# Specifying different properties in the options object

# Convert Month number to Month name using Intl.DateTimeFormat

# Get a Month Number from a Month Name in JavaScript

# Get a Month Number from a Month Name using an object

# Additional Resources

Borislav Hadzhiev

# Specifying different properties in the `options` object