Skip to main content

How to Convert Between Month Number and Month Name in JavaScript

A common requirement in UI development is to display the name of a month (e.g., "January") instead of its number (1), or vice versa. While you could create a manual mapping with an array or object, JavaScript's built-in Intl (Internationalization) API provides a powerful, locale-aware, and modern solution for this.

This guide will teach you how to use the Intl.DateTimeFormat object to convert a month number to its name and how to parse a month name to get its number. This is the recommended approach for creating applications that can be easily adapted to different languages and regions.

The Modern Method: Intl.DateTimeFormat​

The Intl.DateTimeFormat object is the standard, built-in tool for language-sensitive date and time formatting. It is the best choice for this task because it handles different languages and formatting conventions automatically, without requiring any manual translation or mapping.

Converting a Month Number to a Month Name​

Problem: you have a month number (e.g., 1 for January) and you need to get its full name.

Solution: the logic is to create a Date object for that month and then use Intl.DateTimeFormat to format it, showing only the month's name.

function getMonthName(monthNumber) {
  // Create a date in the middle of the month
  // to avoid timezone issues. The month in the Date
  // constructor is 0-based, so we subtract 1.
  const date = new Date(2000, monthNumber - 1, 15);

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

  return formatter.format(date);
}

// Example Usage:
console.log(getMonthName(1));  // Output: "January"
console.log(getMonthName(12)); // Output: "December"
note

A simpler but less flexible alternative is date.toLocaleString('en-US', { month: 'long' }), which uses the Intl API under the hood.

How to Get Different Name Formats (long, short, narrow)​

The Intl.DateTimeFormat API is highly configurable. You can get different versions of the month name by changing the month option.

const date = new Date(2023, 0, 15); // A date in January

// 'long' format
const longFormatter = new Intl.DateTimeFormat('en-US', { month: 'long' });
console.log(longFormatter.format(date));    // Output: "January"

// 'short' format
const shortFormatter = new Intl.DateTimeFormat('en-US', { month: 'short' });
console.log(shortFormatter.format(date));   // Output: "Jan"

// 'narrow' format
const narrowFormatter = new Intl.DateTimeFormat('en-US', { month: 'narrow' });
console.log(narrowFormatter.format(date));  // Output: "J"
note

The narrow format should be used with caution, as different months can have the same initial (e.g., January, June, July).

Converting a Month Name to a Month Number​

The reverse operation—getting a number from a name—is also straightforward.

Problem: you have a month name (e.g., "January") and need its corresponding 1-based number.

Solution: create a Date object by parsing a string that includes the month name, then use the .getMonth() method.

function getMonthNumber(monthName) {
  // Create a date object by parsing the name.
  // The '1' and '2000' are arbitrary but necessary for a valid date string.
  const date = new "Date"(`${monthName} 1, 2000`);

  // getMonth() returns a 0-based index, so add 1.
  return date.getMonth() + 1;
}

// Example Usage:
console.log(getMonthNumber('January'));   // Output: 1
console.log(getMonthNumber('Jan'));       // Output: 1
console.log(getMonthNumber('December'));  // Output: 12
note

The Date constructor is surprisingly flexible and can parse both full month names and standard 3-letter abbreviations.

An Alternative (Less Flexible) Method: An Object Map​

For applications that only ever operate in a single language, a simple object map can be a quick solution.

const monthNameToNumber = {
  'January': 1, 'February': 2, 'March': 3, 'April': 4,
  'May': 5, 'June': 6, 'July': 7, 'August': 8,
  'September': 9, 'October': 10, 'November': 11, 'December': 12,
};

const monthName = 'August';
const monthNumber = monthNameToNumber[monthName];

console.log(monthNumber); // Output: 8
note

The main drawback of this method is that it is not locale-aware. It only works for English and must be manually translated and maintained for other languages, which is why the Intl.DateTimeFormat approach is the superior, professional choice.

Conclusion​

Converting between month numbers and names is a solved problem in modern JavaScript thanks to the built-in Internationalization API.

  • To convert a month number to a name, use Intl.DateTimeFormat with the { month: 'long' } option. This is the recommended best practice for its flexibility and locale-awareness.
  • To convert a month name to a number, parse the name with the new Date() constructor and then use .getMonth() + 1.
  • Avoid using manual object maps unless your application is guaranteed to only ever support a single language.

Table of Contents