How to get month name from Date in JavaScript ?

To get the month name from a Date object in JavaScript, you can use built-in methods to retrieve the month name in different formats (e.g., full name, short name, or localized names). Below are the most common approaches with examples:

1. Using toLocaleDateString() (Localized Month Names)

This method returns the month name in the browser’s locale or a specified language.

Example:

const date = new Date(); // Current date

// Get full month name (e.g., "January")
const fullMonthName = date.toLocaleDateString('en-US', { month: 'long' });
console.log(fullMonthName); // Output: "September" (depending on current month)

// Get short month name (e.g., "Jan")
const shortMonthName = date.toLocaleDateString('en-US', { month: 'short' });
console.log(shortMonthName); // Output: "Sep"

// Get month name in another language (e.g., Spanish)
const spanishMonth = date.toLocaleDateString('es-ES', { month: 'long' });
console.log(spanishMonth); // Output: "septiembre"

Options:

• month: 'long': Full month name (e.g., “January”).
• month: 'short': Short month name (e.g., “Jan”).
• month: 'narrow': Narrow format (e.g., “J” for January, but varies by locale).

2. Using Intl.DateTimeFormat (Advanced Localization)

The Intl.DateTimeFormat API provides fine-grained control over localization.

Example:

const date = new Date();

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

// Short month name in French
const frenchFormatter = new Intl.DateTimeFormat('fr-FR', { month: 'short' });
console.log(frenchFormatter.format(date)); // Output: "sept."

3. Using a Month Array (Non-Localized)

Manually map the month index (0–11) to a predefined array of names.

Example:

const date = new Date();
const monthNames = [
  'January', 'February', 'March', 'April',
  'May', 'June', 'July', 'August',
  'September', 'October', 'November', 'December'
];
const monthIndex = date.getMonth(); // 0 (January) to 11 (December)
console.log(monthNames[monthIndex]); // Output: "September"

Short Month Names:

const shortMonthNames = [
  'Jan', 'Feb', 'Mar', 'Apr',
  'May', 'Jun', 'Jul', 'Aug',
  'Sep', 'Oct', 'Nov', 'Dec'
];
console.log(shortMonthNames[date.getMonth()]); // Output: "Sep"

4. Using getMonth() with a Helper Function

Combine getMonth() with a function to dynamically generate the name.

Example:

function getMonthName(date, locale = 'en-US', format = 'long') {
  return date.toLocaleDateString(locale, { month: format });
}

const date = new Date();
console.log(getMonthName(date)); // "September"
console.log(getMonthName(date, 'de-DE', 'short')); // "Sept."

Key Notes

1. Month Index: date.getMonth() returns 0 (January) to 11 (December).
2. Localization:

• Use toLocaleDateString() or Intl.DateTimeFormat for language-specific names.
• Locale codes: en-US (English), es-ES (Spanish), fr-FR (French), etc.

1. Edge Cases:

• Invalid dates (e.g., new Date('invalid')) will throw errors.
• Always validate the Date object before using these methods.

Summary

Method	Use Case	Example Output
toLocaleDateString()	Localized month names (simple).	“September”, “Sep”
Intl.DateTimeFormat	Advanced or repeated localization.	“septembre” (French)
Month Array	Hardcoded names (non-localized).	“October”
Helper Function	Reusable dynamic formatting.	Customizable output

Live Demo

Try the code in this CodePen Example.

By using these methods, you can easily convert a Date object to a human-readable month name in JavaScript.