CODEWITHSUNDEEP
javascriptdatelocalization
user779159
user779159

Reputation: 9602

Get localized month name using native JS

It's possible to do this to get the localized full month name using native .

var objDate = new Date("10/11/2009"),
    locale = "en-us",
    month = objDate.toLocaleString(locale, { month: "long" });

But this only gets the month number for a given date. I'd simply like to get the month name corresponding to a month number. For example, if I do getMonth(2) it would return February. How can I implement getMonth using native (no libraries like moment)?

Upvotes: 36

Views: 28828

Answers (3)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48620

You can use localization formatting:

const DAYS_IN_WEEK = 7;
const MONTHS_IN_YEAR = 12;

function localizedWeekdayNames(
  locale: Intl.LocalesArgument = "default",
  dateStyle: Intl.RelativeTimeFormatStyle = "short"
): string[] {
  const dayNames: string[] = [];
  const currentDate = new Date();
  while (currentDate.getDay() !== 0) {
    currentDate.setDate(currentDate.getDate() + 1);
  }
  for (let day = 0; day < DAYS_IN_WEEK; day++) {
    dayNames.push(
      currentDate.toLocaleDateString(locale, { weekday: dateStyle })
    );
    currentDate.setDate(currentDate.getDate() + 1);
  }
  return dayNames;
}

function localizedMonthNames(
  locale: Intl.LocalesArgument = "default",
  dateStyle: Intl.RelativeTimeFormatStyle = "short"
): string[] {
  const monthNames: string[] = [];
  const currentDate = new Date();
  while (currentDate.getMonth() !== 0) {
    currentDate.setMonth(currentDate.getMonth() + 1);
  }
  for (let month = 0; month < MONTHS_IN_YEAR; month++) {
    monthNames.push(
      currentDate.toLocaleDateString(locale, { month: dateStyle })
    );
    currentDate.setMonth(currentDate.getMonth() + 1);
  }
  return monthNames;
}

// ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] 
console.log(localizedWeekdayNames());

// ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] 
console.log(localizedMonthNames());

Here is the generated JS with some additional localization output.

const DAYS_IN_WEEK = 7;
const MONTHS_IN_YEAR = 12;

function localizedWeekdayNames(locale = "default", dateStyle = "short") {
  const dayNames = [];
  const currentDate = new Date();
  while (currentDate.getDay() !== 0) {
    currentDate.setDate(currentDate.getDate() + 1);
  }
  for (let day = 0; day < DAYS_IN_WEEK; day++) {
    dayNames.push(currentDate.toLocaleDateString(locale, {
      weekday: dateStyle
    }));
    currentDate.setDate(currentDate.getDate() + 1);
  }
  return dayNames;
}

function localizedMonthNames(locale = "default", dateStyle = "short") {
  const monthNames = [];
  const currentDate = new Date();
  while (currentDate.getMonth() !== 0) {
    currentDate.setMonth(currentDate.getMonth() + 1);
  }
  for (let month = 0; month < MONTHS_IN_YEAR; month++) {
    monthNames.push(currentDate.toLocaleDateString(locale, {
      month: dateStyle
    }));
    currentDate.setMonth(currentDate.getMonth() + 1);
  }
  return monthNames;
}

// Sun Mon Tue Wed Thu Fri Sat
console.log(...localizedWeekdayNames());

// Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
console.log(...localizedMonthNames());

// domingo lunes martes miércoles jueves viernes sábado
console.log(...localizedWeekdayNames('es-ES', 'long'));

// enero febrero marzo abril mayo junio
// julio agosto septiembre octubre noviembre diciembre
console.log(...localizedMonthNames('es-ES', 'long'));

Upvotes: 2

RobG
RobG

Reputation: 147403

To get all the months of a year and days of the week, loop over a set of dates and use toLocaleString with appropriate options to get the required values:

function getLocalDayNames() {
  let d = new Date(2000,0,3); // Monday
  let days = [];
  for (let i=0; i<7; i++) {
    days.push(d.toLocaleString('default',{weekday:'long'}));
    d.setDate(d.getDate() + 1);
  }
  return days;
}

console.log(getLocalDayNames());

function getLocalMonthNames() {
  let d = new Date(2000,0); // January
  let months = [];
  for (let i=0; i<12; i++) {
    months.push(d.toLocaleString('default',{month:'long'}));
    d.setMonth(i + 1);
  }
  return months;
}

console.log(getLocalMonthNames());

The language default means toLocaleString uses the default language of the implementation that the code is running in.

Upvotes: 2

k102
k102

Reputation: 8079

You are already close:

var getMonth = function(idx) {

  var objDate = new Date();
  objDate.setDate(1);
  objDate.setMonth(idx-1);

  var locale = "en-us",
      month = objDate.toLocaleString(locale, { month: "long" });

    return month;
}

console.log(getMonth(1));
console.log(getMonth(12));

Upvotes: 67

Related Questions