DEV Community

Cover image for How to get month list in your locale
Maksim
Maksim

Posted on • Edited on

23 6

How to get month list in your locale

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);
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Follow me in Twitter

Update
By your requests I have extracted function in package

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (9)

Collapse
 
pretaporter profile image
Maksim

Thanks, fixed

Collapse
 
umutakyol profile image
asdsadasf

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?

Collapse
 
pretaporter profile image
Maksim

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);
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
dannyengelman profile image
Danny Engelman • Edited

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);
}

```

`
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
dannyengelman profile image
Danny Engelman • Edited

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))
  );
```

`
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
pretaporter profile image
Maksim

Cool, thanks!

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

Collapse
 
mvalentine512 profile image
Mark Valentine

Sorry I know this is a bit of an old thread but I can't find an answer via google. Could someone please explain line 8 of Danny Engleman's 2nd post.

I get that it is creating an object as the 2nd parameter to "DateTimeFormat" with 1 attribute named "month" that maps to another object.

What does [notation[0]] || "long" do? To me it looks like it should be a 2nd attribute of the outer object, but in my mind it should have a comma.

Thank you in advance.

Collapse
 
mvalentine512 profile image
Mark Valentine

Never mind. I got it.

Collapse
 
pretaporter profile image
Maksim

Amazing work!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay