loading...
Cover image for How to get month list in your locale

How to get month list in your locale

pretaporter profile image Maksim Updated on ・1 min read

Hi there! I am glad to show simple TypeScript function, that maybe will save your time. In many cases you need to implement selector of months. In some cases it should be in different locales. See it below:

function getMonthList(
  locales?: string | string[],
  format: "long" | "short" = "long"
): string[] {
  const year = new Date().getFullYear(); // 2020
  const monthList = [...Array(12).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
  const formatter = new Intl.DateTimeFormat(locales, {
    month: format
  });

  const getMonthName = (monthIndex: number) =>
    formatter.format(new Date(year, monthIndex));

  return monthList.map(getMonthName);
}

That's it. Just provide your locale as param.
For example, πŸ‡¬πŸ‡§ getMonthList('en') will return:

January
February
March
April
May
June
July
August
September
October
November
December

Try it by yourself on codesandbox.

For short version of names just provide second param as short.
For example, πŸ‡¬πŸ‡§ getMonthList('en', 'short') will return:

Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec

Follow me in Twitter

Update
By your requests I have extracted function in package

Posted on by:

pretaporter profile

Maksim

@pretaporter

Creator of https://github.com/ibitcy/eo-locale. Frontend developer. Son, husband and cat owner.

Discussion

markdown guide
 

Hi, great article, thanks.

Which part of this code is typescript, It's like all javascript to me, but some parts seems strange. Maybe those parts, lol?

 

Thank you! JavaScript version:

function getMonthList(locales, format = "long") {
  const year = new Date().getFullYear(); // 2020
  const monthList = [...Array(12).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
  const formatter = new Intl.DateTimeFormat(locales, {
    month: format
  });

  const getMonthName = (monthIndex) =>
    formatter.format(new Date(year, monthIndex));

  return monthList.map(getMonthName);
}
 

Using the 2nd parameter mapFn on Array.from instead of .map saves a spread on monthList

function getMonthList(locales, format = "long") {
  const year = new Date().getFullYear(); // 2020
  const monthList = Array(12).keys(); // an Array Iterator
  const formatter = new Intl.DateTimeFormat(locales, {
    month: format
  });
  const getMonthName = (monthIndex) =>  formatter.format(new Date(year, monthIndex));

  return Array.from(monthList , getMonthName);
}


`

And since year is not a parameter, no need for const year declaration to get a monthname

new Date(0, monthIndex) will do, for ES Arrow function:

const getMonthList = (locale = "en", notation = "long" ) =>
  Array.from(
    Array(12).keys(),
    key => Intl.DateTimeFormat(locale, {
      month: {
         s : "short",
         n : "numeric"
      } [notation[0]] || "long"
    })
    .format(new Date(0, key))
  );


`

Cool, thanks!

For constructor of Intl.DateTimeFormat locales is optional param. No requirement to provide default value of locale.

 

Nice! I also discovred this trick while writing my date picker library. Here's how to do the same thing with weekdays: github.com/simonlc/date-picker-rea...

 
 

Please note that locale is a distinctly different concept than language. Because these work with defaulting mechanisms they may seem the same in your example, but they are not.