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.
Note
The value passed to setMonth()
is expected to be zero-based. For example, a value of 0
represents January, 1
represents February, 2
represents March, and so on. This why we pass the value of 1
subtracted from the month number (monthNumber - 1
) to setMonth()
.
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:
locales
: A string with a BCP 47 language tag, or an array of such strings. There are many locales we can specify, likeen-US
for US English,en-GB
for UK English, anden-CA
for Canadian English.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
11 Amazing New JavaScript Features in ES13
This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.