Cómo obtener el nombre del mes y el día en JavaScript

En esta breve guía, aprenda cómo obtener el nombre del día o mes de una fecha en Vanilla JavaScript, con getDay(), getMonth(), toLocaleString() y Moment.js.

Introducción

Las fechas son una parte regular de nuestra vida cotidiana, y generalmente somos conscientes del día, o al menos del mes en el que estamos en un momento dado. Esto demuestra ser un excelente punto de referencia para el tiempo, y mostrar el nombre de un mes o un día puede ayudar a los usuarios a determinar cuándo, en relación con su estado actual, sucedió o sucederá algo.

En JavaScript, hay varias formas en que podemos lograr esto.

En este artículo, lo guiaremos a través de las formas más comunes sobre cómo obtener el nombre del mes y el día en Vanilla JavaScript, además de cómo esto también se puede lograr con la biblioteca Moment.js.

Es importante tener en cuenta que si está trabajando en un proyecto pequeño, puede ser frustrante comenzar a instalar paquetes para algo rudimentario. Los proyectos pequeños deben implementarse utilizando los métodos incorporados de JavaScript, las dependencias solo deben introducirse si surge la necesidad.

Obtener y mostrar el nombre de un día o mes, en JavaScript, se puede simplificar a:

1
2
let now = new Date().toLocaleDateString('en-us', { weekday:"long", month:"long", day:"numeric"});
console.log(now)

Esto resulta en:

1
Friday, March 4

Hay algunos parámetros que podemos modificar aquí para obtener un resultado y efecto diferente, y vale la pena señalar cómo funciona el método toLocaleDateString() y qué configuraciones regionales están disponibles. ¡También puede extraer nombres de días o meses singulares del método!

Responderemos a todas estas preguntas en las secciones siguientes.

El objeto Fecha en JavaScript

El objeto Date es un tipo de datos integrado, que se usa para trabajar con fechas y horas. El objeto Date se crea utilizando la palabra clave new, es decir, new Date() y proporciona una serie de métodos integrados para formatear y administrar esos datos.

De forma predeterminada, una nueva instancia de Date sin ningún parámetro crea un objeto correspondiente a la fecha y hora actuales (es decir, de acuerdo con la configuración del sistema de la computadora):

1
2
let dateTime = new Date();
console.log(dateTime); // Mon Mar 07 2022 18:07:01 GMT+0100 (Central European Standard Time)

Ahora, echemos un vistazo a cómo extraer el día y el mes de esta salida, ¡y obtener sus nombres!

Obtener el día del objeto de fecha de JavaScript

Hay varias formas de extraer la fecha de un objeto Date. Hemos usado toLocaleString() en la introducción, ¡pero también puedes extraer el campo exacto con getDay()!

Usando el método getDay()

getDay() devuelve el día de la semana (un número para representar el día de la semana entre 0 y 6) para ese objeto Date:

1
2
3
4
5
6
7
// Get current day
let day = new Date().getDay();
console.log(day); //6

// Get day in the week of a certain date
let day = new Date("October 14, 2020 09:38:00").getDay();
console.log(day); //3

Sabiendo muy bien que hay 7 días en una semana, ¡simplemente podemos mapear los días de una semana en un inedx! Sin embargo, vale la pena señalar que la numeración de los días de una semana comienza en domingo y termina en sábado:

1
2
3
4
5
Sunday=0, 
Monday=1, 
Tuesday=2,
...,
Saturday=6.

Vamos a crear una matriz de los nombres de los días de la semana, siguiendo el orden esperado, y obtengamos el nombre, dado el índice (día de la semana) devuelto por getDay():

1
2
3
4
let daysArray = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let day = new Date().getDay();
let dayName = daysArray[day];
console.log(dayName); // "Saturday"

También puede envolver esta funcionalidad en una función invocable si está usando la lógica en múltiples ocasiones:

1
2
3
4
5
6
7
const getDayName = (dayIndex) =>{
    let daysArray = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    return daysArray[dayIndex];
}
  
const dayName = getDayName(new Date().getDay());
console.log(dayName); // "Saturday"

Usando el método toLocaleDateString()

¡Un método mucho más sencillo, que hace la lógica de indexación por usted es toLocaleDateString()! Además, proporciona opciones de formato para la configuración regional que haya definido, por lo que puede adaptar dinámicamente el formato a la ubicación del usuario.

Este método incluye cuatro opciones básicas: día de la semana, año, mes y día, y nos permite configurar el nombre del día para que sea más largo o más corto:

1
2
3
4
5
let dayName = new Date().toLocaleDateString('en-us', { weekday:"long"})
console.log(dayName); // "Saturday"
  
let dayNameSt = new Date().toLocaleDateString('en-us', { weekday:"short"})
console.log(dayNameSt); // "Sat"

Obtener el mes del objeto de fecha de JavaScript

Hasta ahora hemos podido ver cómo conseguir el día y sé que estáis adivinando cómo funcionará el del mes. Para ser muy sincero, la mayoría de ustedes, si no todos, lo harán bien. Usaríamos los dos métodos como lo hicimos para el día, pero solo cambiamos un poco la sintaxis.

Usando el método getMonth()

El método getMonth() es otro método Date, de la misma forma que getDay() devuelve un número entero - devuelve el índice del mes, indicado por la instancia Date. El mes devuelto estará entre 0..11, comenzando en enero y terminando en diciembre:

1
2
3
4
5
let month = new Date().getMonth();
console.log(month); // 2

let month = new Date("October 14, 2020 09:38:00").getMonth();
console.log(month); // 9

Definamos una matriz de nombres de meses y acceda al nombre apropiado según el valor devuelto:

1
2
3
4
let monthsArray = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
let month = new Date().getMonth();
let monthName = monthsArray[month];
console.log(monthName); // "March"

También podríamos decidir hacer que esto sea reutilizable mediante la creación de una función que se pueda llamar fácilmente en cualquier lugar de su aplicación:

1
2
3
4
5
6
7
 const getMonthName = (monthIndex) =>{
        let monthsArray = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        return monthsArray[monthIndex];
}
  
const monthName = getMonthName(new Date().getMonth());
console.log(monthName); // "March"

Usando el método toLocaleDateString()

De nuevo, el método toLocaleDateString() formatea una Fecha en una cadena, mostrando el campo que nos interesa y formateándolo de acuerdo con el objeto de configuración:

1
2
3
4
5
let monthName = new Date().toLocaleDateString('en-us', { month:"long"})
console.log(monthName); // "March"
  
let monthNameSt = new Date().toLocaleDateString('en-us', { month:"short"})
console.log(monthNameSt); // "Mar"

Usar bibliotecas JavaScript

También es conveniente que cubramos cómo se podría lograr esto con Moment.js, una popular biblioteca de JavaScript presente en muchos proyectos.

Momento.js

Moment.js es ampliamente considerado como uno de los mejores paquetes de fecha y hora de JavaScript, y por una buena razón. ¡Es realmente simple de usar, está ampliamente documentado y tiene un tamaño de solo 20kb (minimizado, comprimido con gzip)!

Cómo obtener el nombre del día con Moment.js

Moment.js hace que obtener el nombre del día o del mes sea muy fácil: ¡simplemente formateamos() una fecha! El significante 'ddd' formatea el nombre de la fecha a uno corto, mientras que 'dddd' lo formatea a uno largo:

1
2
3
4
5
6
7
8
// Get current date
var date = moment();

var dayName = date.format('ddd');
console.log(dayName); // "Sat"

var dayName = date.format('dddd');
console.log(dayName); // "Saturday"

Cómo obtener el nombre del mes con Moment.js

La misma lógica se aplica a los nombres de los meses:

1
2
3
4
5
6
var date = moment();
var monthName = date.format('MMM');
console.log(monthName); // "Mar"
  
var monthName = date.format('MMMM');
console.log(monthName); // "March" 

Conclusión

En esta guía, hemos cubierto cómo obtener el nombre del día y el mes de una fecha en JavaScript, en un formato amigable para los humanos.

Hemos cubierto los métodos getDay(), getMonth(), toLocaleString(), así como Moment.js, que simplifica y agiliza el proceso.