Cómo obtener la fecha actual en JavaScript

Ya sea que esté creando una aplicación de rutina diaria, su propio blog o cualquier otro tipo de aplicación web dinámica, probablemente necesitará trabajar con fechas. En este art...

Introducción

Ya sea que esté creando una aplicación de rutina diaria, su propio blog o cualquier otro tipo de aplicación web dinámica, probablemente necesitará trabajar con fechas. En este artículo, vamos a aprender cómo obtener la fecha actual en JavaScript, para que pueda desarrollar con éxito sus aplicaciones. En JavaScript, hay una plétora de opciones para elegir, pero la clase principal que se usa es Date(). Tiene muchos métodos y cómo lo use dependerá del formato de la fecha que desee obtener. Luego, le mostraré una biblioteca de JavaScript popular que se puede usar para formatear el tiempo en general, y no solo las fechas.

Uso de la clase Date()

Date() es una clase de referencia en JavaScript cuando se habla de tiempo. ¡Hay varias formas de obtener la hora y la fecha de forma granular a partir de esta clase!

Usando los métodos getDate(), getMonth() y getFullYear()

Nota para el método getDate: lo primero que se debe notar al usar este enfoque es que usamos getDate y no getDay. La razón es que el método getDay devuelve el día de la semana, así que como es viernes mientras escribo, el método getDay devolvería 5. El método getDate en realidad hace lo que necesitamos en este caso, devuelve el número del día del mes. Entonces, para mí, ahora mismo el día del mes es 21 (porque es 21.05.2021). Estos métodos se confunden fácilmente, así que quería avisarles.

Nota para el método getMonth: Otra cosa a tener en cuenta es que los índices de mes comienzan desde 0, por lo que enero es 0, febrero es 1, etc. Básicamente, cuando recuperamos el número de mes, necesitamos agregar 1.

Ahora que eliminamos los problemas potenciales, codifiquemos:

1
2
3
4
5
6
7
let date = new Date()
let day = date.getDate();
let month = date.getMonth()+1;
let year = date.getFullYear();

let fullDate = `${day}.${month}.${year}.`;
console.log(fullDate);

Al principio, instanciamos la clase Fecha y para cada parte de la fecha, usamos una variable para dividirla e inspeccionar cada una.

Colocamos el resultado de cada método en una variable separada y luego usamos interpolación de cadenas para crear una fecha completa. La interpolación de cadenas es cuando pasamos variables a una cadena; en JavaScript esto se logra entre tildes de retroceso ( `` ) y las variables se colocan en ${variableName}. Si no prefiere la interpolación de cadenas, al revés, simplemente concatene (agregue) cadenas juntas de esta manera:

1
let fullDate = day + "." + month + "." + year + ".";

Nuestros resultados serán los mismos en cada caso:

1
2
21.5.2021. // string interpolation
21.5.2021. // string concatenation

Digamos que quiere mostrar el mes como 05 y no como 5. Desafortunadamente, la clase Date incorporada de JavaScript no tiene muchas opciones para formatear fechas en cadenas como lo hacen otras bibliotecas. Entonces, en este caso, tendremos que formatear nosotros mismos, lo que podemos hacer con algunos de los métodos de JavaScript en cadenas, como padStart (longitud, subcadena). Lo que hace es 'rellenar' (poner antes) nuestra cadena con la subcadena, hasta que alcanza la longitud. Así que como queremos hacer 05 a partir de 5, queremos rellenar nuestra cadena con "0" hasta que alcance la longitud 2. Antes de todo eso, necesitamos cast date.getMonth() +1 para escribir String. Casting es cambiar explícitamente el tipo de una variable de uno a otro. Aquí cambiamos el tipo number para escribir String. Nuestra variable mes cambiará a:

1
let month = String(date.getMonth()+1).padStart(2, "0");

Esto cambiará nuestro formato de fecha a:

1
21.05.2021.

Usando el método toJSON()

El método anterior dejaba espacio para el formato de la fecha; podría tener una fecha como dd/mm/yyyy, dd-mm-yyyy, dd.mm.yyyy y todas las demás variaciones relacionadas con el orden del día, mes y año. Cuando se usa toJSON(), devuelve un formato yyyy-mm-dd junto con el formato de hora, hh:mm:ss.ms.

Veamos una vista previa de este enfoque:

1
2
let date = new Date().toJSON();
console.log(date);

Esto generará:

1
2021-05-21T13:42:07.553Z

Debería ver una salida similar a esta, pero obviamente su salida será diferente dependiendo de cuándo ejecutó el código. Vemos que solo necesitamos la fecha, que son los primeros 10 caracteres, así que usemos el método slice() de JavaScript. El método slice(a, b) corta una cadena desde el punto a hasta el punto b; en nuestro ejemplo de 0 a 10. Intentémoslo:

1
let date = new Date().toJSON().slice(0, 10);

Esto devolverá:

1
2021-05-21

Podemos dividir aún más esta cadena, por lo que podemos organizar las partes en las variables día, mes y año, pero sería exagerar, por lo que si necesita un formato diferente, simplemente use un enfoque diferente.

Uso de los métodos toISOString(),_ toUTCString()_ y toLocaleDateString()

Dato curioso: toISOString() devuelve exactamente el mismo resultado que toJSON(), por lo que lo omitiremos e iremos directamente a toUTCString().

Usar toUTCString()
1
2
let date = new Date().toUTCString();
console.log(date);

Nos dará la salida:

1
Fri, 21 May 2021 13:53:30 GMT

Este formato también devuelve la fecha y la hora, con la adición del día de la semana. Como dije en la sección toJSON(), podría analizar más este resultado, pero probablemente sería innecesario ya que tiene diferentes enfoques. Como solo obtenemos la fecha, podemos dividir esto. Ahora no hay necesidad de enviar, porque esto ya es una Cadena:

1
let date = new Date().toUTCString().slice(5, 16);

Esto nos dará la salida deseada:

1
21 May 2021
Usando toLocaleDateString()

Este método devuelve la fecha en un formato correspondiente al idioma de su sistema. Incluso tiene la opción de pasar el idioma deseado como argumento e incluso opciones simples de formato de fecha como ‘día de la semana’, ‘mes’, ‘día’, etc. Dividiremos esto en 3 ejemplos:

  1. Opciones predeterminadas

    Let's see what happens when we call the method without any arguments:

    1
    2
    
    let date = new Date().toLocaleDateString();
    console.log(date);
    

    The output, for me, will be:

    1
    
    5/21/2021
    

    This output depends on your locale, mine is US so the format will be as US date format.

  2. Aprobar solo la preferencia de idioma

    If you want define a specific locale, you can pass it as a string argument, like so:

    1
    2
    
    let date = new Date().toLocaleDateString("fr-FR");
    console.log(date);
    

    The fr-FR is a locale code for France. You can find all the locale codes aquí.

    The French date format is dd/mm/yyyy, so the output will be:

    1
    
    21/5/2021
    
  3. Aprobar la preferencia de idioma y las opciones

    Finally, let's go through the possible options. Only month and weekday can have a value of "long" or "numeric". Day and year can only be "numeric":

    • day
    • month
    • year
    • weekday
1
2
3
4
5
6
7
const dateOptions = { 
    day: 'numeric',
    month: 'long',
    year: 'numeric'
};

console.log(event.toLocaleDateString('fr-FR', dateOptions));

Excluiremos weekday ya que solo necesitamos la fecha. Esto debería generar:

1
21 mai 2021

Ahora también aprendiste un poco de francés.

Usando ahora()

El método now() devuelve el número de milisegundos transcurridos desde el 1 de enero de 1970, que es el comienzo de la época de Unix en la programación. Si pasamos el número de milisegundos al constructor Date, podemos obtener una fecha en formato ISO. Vamos a intentarlo:

1
2
let time = Date.now()
console.log(time);

Lo que generará, nuevamente, para mí:

1
1621608925212

Ahora, si le pasamos ese tiempo al constructor, como se mencionó anteriormente, podemos crear un objeto de fecha con ese tiempo:

1
2
let date = new Date(time);
console.log(time);

Esto generará:

1
2021-05-21T14:55:25.212Z

Y ya sabemos cómo procesar esto, usando slice().

Usando momento.js

Esta es solo una alternativa para usar todos los métodos anteriores, una biblioteca hecha específicamente para fechas y horas en JavaScript. Puedes visitar su sitio web aquí. Aunque esta biblioteca tiene bastantes funciones, solo explicaré cómo crear y dar formato simple a una fecha. Vamos a ver cómo funciona:

1
2
3
moment.format();
moment.format('Do MMMM YYYY');
moment.format('Do MMMM YY');

Si no pasa nada al formato, obtendrá una representación ISO de la fecha, sin embargo, puede elegir cualquier formato que desee (y que se define en la documentación de Moment).

El código anterior generará:

1
2
3
2021-05-21T17:17:02+02:00
May 21st 2021
May 21st 21

Esta opción no es la mejor si lo único que buscas es recuperar la fecha actual. Esto se debe a que la biblioteca Moment es bastante grande e inflará su código JS cuando se use en aplicaciones front-end. Por otro lado, si necesita manipulación de fecha y hora o un formato más avanzado, esta es una gran biblioteca.

Conclusión

Existen numerosas formas de recuperar una fecha en JavaScript, solo necesita elegir una que se ajuste a su caso de uso. Para necesidades muy simples, como crear una fecha o un formato muy simple, puede usar la clase Date incorporada. Si necesita algo un poco más complejo con fecha y hora, moments.js es una biblioteca para elegir.