Obtener el nombre del mes en JavaScript

1. Uso de la función toLocaleString en JavaScript
2. Uso del objeto Intl.DateTimeFormat en JavaScript
3. Uso de código personalizado para obtener el nombre del mes de una fecha determinada en JavaScript

En JavaScript, tenemos un método getMonth() de objeto de fecha. Devuelve el índice de un mes a partir de 0. Pero la mayoría de las aplicaciones en escenarios del mundo real exigen que este mes esté en nombre alfabético para facilitar la lectura del usuario final. Puede ser difícil escribir código para representar el nombre del mes para el índice de mes dado. Veamos algunas formas de obtener el nombre de un mes en JavaScript.

Uso de la función toLocaleString en JavaScript

Podemos usar la función toLocaleString de javascript para obtener el nombre del mes de un objeto de fecha. Ofrece opciones para devolver los nombres de los meses en un idioma determinado con el apoyo de la función toLocaleString.

Sintaxis de la función toLocaleString

toLocaleString()
toLocaleString(locales)
toLocaleString(locales, options)

Parámetros:

La función generalmente se usa sin ningún parámetro para obtener la cadena de fecha. toLocaleString acepta dos parámetros opcionales, el primero es la clave de idioma (por ejemplo, en-US para inglés, ar-EG para árabe, etc.), y el segundo es un conjunto de configuraciones pasadas como options. Las options son un objeto.

Tipo de devolución:

toLocaleString devuelve un valor de cadena que representa la fecha en el formato MM/DD/YYYY, hh:mm:ss a. a para AM / PM.

Podemos usar la función para obtener las formas largas y cortas de los nombres de los meses. Los más largos muestran los nombres completos de los meses, mientras que los más cortos muestran solo los primeros tres caracteres del nombre del mes en la salida. El uso es el siguiente.

const dateObj = new Date('1-1-2021');
const dateString = dateObj.toLocaleString();
const enDateString = dateObj.toLocaleString('en-US');
const monthNameLong = dateObj.toLocaleString('en-US', {month: 'long'});
const monthNameShort = dateObj.toLocaleString('en-US', {month: 'short'});
console.log(dateString);
console.log(enDateString);
console.log(monthNameLong);
console.log(monthNameShort);

Producción :

1/1/2021, 12:00:00 AM
1/1/2021, 12:00:00 AM
January
Jan

Obtenemos nombres de meses más largos con el { month: 'long' } pasado como la option. Para nombres de meses más cortos, necesitamos establecer la configuración del mes en corto como en { month: 'short' }.

Nota

• toLocaleString es compatible con todos los navegadores, incluido el navegador Internet Explorer.
• Es posible que comparar la salida de la cadena de fecha con una fecha almacenada como una cadena en una variable no dé resultados consistentes en todos los navegadores. Por ejemplo, el siguiente código puede ejecutarse de manera diferente en Firefox e Internet Explorer y versiones anteriores de los navegadores MS Edge.

('1/5/2021, 6:00:00 PM' ===
 new Date('2021-01-05T12:30:00Z').toLocaleString('en-US')) ?
    true :
    false;

Salida en Chrome:

true

Salida en Internet Explorer:

false

Ocurre porque Internet Explorer y las versiones anteriores de Edge insertan caracteres de control al principio y al final de la cadena de fecha. Puede intentar comprobar la longitud de la cadena de salida por new Date("2021-01-05T12:30:00Z").toLocaleString("en-US") en Chrome e Internet Explorer para observar la diferencia. IE dice que la longitud es 32 mientras que Chrome lo dice como 20. Y también, el carácter en la posición cero en las consolas IE como "" mientras que en Chrome, da "1".

Uso del objeto Intl.DateTimeFormat en JavaScript

Intl.DateTimeFormat devuelve un objeto DateTimeFormat. Tiene una función format que toma la fecha objetivo como entrada y la formatea según las options que establezcamos. Es similar a la función toLocaleString. La diferencia es que toLocaleString se aplica a un objeto con el tipo de datos como fecha. Mientras que en Intl.DateTimeFormat, pasamos la fecha como un argumento a la función format. Los nombres de los parámetros difieren para varios escenarios de formato de fecha (consulte Documentos de MDN para obtener más detalles). Intl.DateTimeFormat es compatible con todos los navegadores. Podemos obtener los nombres más largos y más cortos para los meses usando Intl.DateTimeFormat como se muestra en el siguiente código.

new Intl.DateTimeFormat('en-US', {month: 'short'})
    .format(new Date('1-1-2021')) new Intl
    .DateTimeFormat('en-US', {month: 'long'})
    .format(new Date('1-1-2021'))

Producción :

Jan
January

Nota

• El constructor Intl.DateTimeFormat se crea para formatear fechas. Intl.DateTimeFormat tiene mucha más flexibilidad con el formato de los objetos date. Podemos usarlo para obtener la cadena de fecha en un idioma local. Incluso admite una opción para proporcionar un lenguaje de reserva en su objeto options.
• Es compatible con todos los navegadores web, incluidas las versiones anteriores de Internet Explorer.

Uso de código personalizado para obtener el nombre del mes de una fecha determinada en JavaScript

Si no queremos utilizar los dos métodos JavaScript incorporados anteriores, podemos escribir un código personalizado para obtener el nombre del mes para la fecha correspondiente. Podemos escribir el código de varias formas. Podemos usar dos matrices: una con los nombres de los meses largos y la otra con los nombres de los meses más cortos. Pero a continuación se muestra el código conciso y eficiente que usa una única matriz de nombres de meses para devolver el nombre completo y el nombre corto. Veamos el siguiente código.

const monthNames = [
  'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
  'September', 'October', 'November', 'December'
];

getLongMonthName =
    function(date) {
  return monthNames[date.getMonth()];
}

getShortMonthName =
    function(date) {
  return monthNames[date.getMonth()].substring(0, 3);
}

    console.log(getLongMonthName(new Date('1-1-2021')));
console.log(getShortMonthName(new Date('1-1-2021')));
console.log(getLongMonthName(new Date('11-5-2021')));
console.log(getShortMonthName(new Date('11-5-2021')));
console.log(getLongMonthName(new Date('12-8-2021')));
console.log(getShortMonthName(new Date('12-8-2021')));

Producción :

January
Jan
November
Nov
December
Dec

Usamos dos funciones en el fragmento de código anterior: una para obtener el nombre completo y la otra para los más cortos.

• Codificamos la función getLongMonthName() que toma un objeto de fecha como parámetro y devuelve el nombre completo del mes correspondiente. Utiliza la función incorporada en javascript, getMonth(). La función getMonth() del objeto de fecha devuelve el índice del mes. Usamos este índice para obtener el nombre del mes del array monthNames que contiene el nombre completo de los meses.
• Tenemos la función getShortMonthName que tiene un paso adicional para acortar el nombre del mes. Utiliza la misma lógica que getLongMonthName. Truncamos el resultado final a tres caracteres usando la función substring() de javascript. Por lo tanto, obtenemos el nombre corto del mes para la fecha pasada como parámetro.
• Es posible que necesitemos modificar el array monthNames para admitir más de un idioma para permitir la localización e internacionalización del código. Podemos usar diferentes matrices de cadenas para almacenar nombres de meses de varios idiomas. Y puede que no siempre sea cierto que los nombres de los meses más cortos sean solo los primeros tres caracteres. Cada idioma tiene su representación para nombres de meses más cortos. Por lo tanto, es posible que necesitemos usar dos matrices para dichos lenguajes: uno que contiene los nombres de los meses más largos y el otro que contiene los nombres de los meses más cortos. La lógica en getLongMonthName() todavía se puede utilizar para obtener el nombre del mes correspondiente al valor de fecha pasado como parámetro.