JavaScript Date Now – Cómo obtener la fecha actual con JavaScript

Muchas de las aplicaciones que construirás tendrán algún componente del tipo fecha, ya sea por la creación de la fecha de un recurso, o por una marca temporal (timestamp) de alguna actividad.

Tratar con formatos de fechas y marcas de tiempo puede resultar agotador. En esta guía encontrarás cómo obtener la fecha de hoy en varios formatos con JavaScript.

Objeto Date (fecha) de JavaScript

JavaScript tiene un objeto  Date  integrado que almacena la fecha y la hora y provee de métodos para manejarlos.

Para crear una nueva instancia del objeto Date, utiliza la palabra clave new :

const fecha = new Date();

El objeto Date contiene un Number(número) que representa los milisegundos pasados desde el Epoch (fecha de referencia), que es el 1 de enero de 1970.  

Puedes convertir una string al constructor Date para crear un objeto con una fecha específica:

const fecha = new Date('Jul 12 2011');

Para obtener el año actual, utiliza el método de instancia getFullYear() del objeto Date . El método getFullYear() devuelve el año de la fecha especificada en el constructor  Date

const añoActual = fecha.getFullYear();
console.log(añoActual); //2020

Así mismo, existen métodos para obtener el día y el mes en los que estamos actualmente:

const hoy = fecha.getDate();
const mesActual = fecha.getMonth() + 1; 

El método getDate() devuelve el día del mes en el que estamos (1-31).

El método getMonth() devuelve el mes de la fecha especificada. Un punto a tener en cuenta acerca del método getMonth() es que devuelve valores indexados (0-11) donde el 0 es enero y el 11 es diciembre. Por tanto, añadiéndole 1 normalizamos el valor del mes.

Date now

now() es un método estático del objeto Date . Devuelve el valor en milisegundos que representa el tiempo transcurrido desde el Epoch. Puedes pasar los milisegundos devueltos del método now() dentro del constructor Date para crear una instancia de un nuevo objeto Date:

const tiempoTranscurrido = Date.now();
const hoy = new Date(tempoTranscurrido);

Formateando Date

Puedes formatear la fecha en múltiples formatos (GMT, ISO, y demás) utilizando los métodos del objeto Date.

El método toDateString() devuelve la fecha en un formato legible por un humano:

hoy.toDateString(); // "Sun Jun 14 2020"

El método toISOString() devuelve la fecha siguiendo con el Formato Extendido de ISO 8601:

hoy.toISOString(); // "2020-06-13T18:30:00.000Z"

El método toUTCString() devuelve la fecha en el formato según la zona horaria UTC:

hoy.toUTCString(); // "Sat, 13 Jun 2020 18:30:00 GMT"

El método toLocaleDateString() devuelve la fecha en un formato sensible a la localización, adaptándose así al idioma y formato del lugar donde te encuentres:

hoy.toLocaleDateString(); // "14/6/2020"

Puedes encontrar una referencia completa de los métodos de Date en la documentación oficial de MDN.

Función para formatear a medida la fecha

Aparte de los formatos ya mencionados en la sección de más arriba, tu aplicación puede tener un formato diferente de datos. Puede ser en el formato yy-dd-mm, yyyy-dd-mm, dd-mm-yy o de cualquier otro.  

Para abordar este problema, conviene crear una función reutilizable que podremos usar en función de que la necesitemos en todos nuestros proyectos.

Por tanto, en esta sección, vamos a crear una función de utilidad que nos devuelva la fecha en el formato que le indiquemos en el argumento:

const hoy = new Date();

function formatoFecha(fecha, formato) {
	//
}

formatoFecha(hoy, 'dd/mm/yy');

Necesitas reemplazar las strings "dd", "mm" y "yy" con los respectivos valores del día, mes y año del formato pasado en la string que pasamos en el argumento.

Para hacer eso puedes usar el método replace() como te muestro aquí abajo:

formato.replace('mm', fecha.getMonth() + 1);

 Pero esto dará lugar a un encadenamiento de métodos y dificultará el mantenimiento a medida que intentas hacer que la función sea más flexible:

formato.replace('mm', fecha.getMonth() + 1)
    .replace('yy', fecha.getFullYear())
	.replace('dd', fecha.getDate());

En lugar de usar métodos de encadenamiento, puedes hacer uso de expresiones regulares con el método replace().

Primero, crea un objeto que represente un par clave-valor del substring con su respectivo valor:

const formatoMap = {
    dd: fecha.getDate(),
    mm: fecha.getMonth() + 1,
    yy: fecha.getFullYear().toString().slice(-2),
    yyyy: fecha.getFullYear()
};

Después, usa una expresión regular para hacer coincidir y reemplazar las strings:

fechaFormateada = formato.replace(/mm|dd|yy|yyy/gi, matched => map[matched]);

La función completa se ve así:

function formatoFecha(fecha, formato) {
    const map = {
        dd: fecha.getDate(),
        mm: fecha.getMonth() + 1,
        yy: fecha.getFullYear().toString().slice(-2),
        yyyy: fecha.getFullYear()
    }

    return formato.replace(/dd|mm|yy|yyy/gi, matched => map[matched])
}

Puedes también añadir la habilidad de formatear las marcas de tiempo a la función.

Conclusión

Espero que ahora entiendas mejor el objeto Date de JavaScript. Puedes usar también librerías externas como datejs y  moment para manejar fechas en tu aplicación.

Hasta la siguiente, cuídate y a por ello.

Traducido del artículo de Vijit Ail- https://www.freecodecamp.org/news/javascript-date-now-how-to-get-the-current-date-in-javascript/