Formatear fechas en JavaScript

En este tutorial aprenderemos diferentes métodos para formatear fechas en JavaScript. Algunos del propio lenguaje y otros que conviene conocer porque pueden llegar a ser muy útiles.

Ver el tutorial Métodos de la clase Date JavaScript

Método toString

Devuelve un string con formato «Tue Apr 25 2023 16:14:22 GMT+0200 (hora de verano de Europa central)»

Ejemplo

var fecha = new Date();
var fechaFormateada = fecha.toString();
// fechaFormateada vale "Tue Apr 25 2023 16:14:22 GMT+0200 (hora de verano de Europa central)"

Método toDateString

Devuelve un string con formato «Tue Apr 25 2023»

El formato de salida es un string con la siguiente estructura:

Imprime las 3 primeras letras del nombre del día de la semana
Imprime las 3 primeras letras del nombre del mes
Imprime 2 dígitos del día del mes, añadiendo ceros al inicio si es necesario
Imprime 4 dígitos del año

Ejemplo

var fecha = new Date().toDateString();
// fecha vale "Tue Apr 25 2023"

Método toLocaleString

Devuelve un string con formato «25/4/2023, 16:15:14»

Ejemplo

var fecha = new Date();
var fechaFormateada = fecha.toLocaleString();
// fechaFormateada vale "25/4/2023, 16:15:14"

Método toLocaleDateString

Devuelve un string con diferentes formatos según los parámetros

El formato de salida es un string de acuerdo con las características locales. Permite enviar parámetros para personalizar el resultado y adaptarlo a lo que nos interese.

Ejemplo 1

Uso del método sin parámetros

// Sin pasar ningún parámetro
var fechaFormateada = new Date().toLocaleDateString()
// fechaFormateada vale "25/4/2023"

Ejemplo 2

Uso del método pasándole como parámetro la localización

var fecha = new Date();
// Pasando el locale como español de españa
var fechaFormateada = fecha.toLocaleDateString('es-ES');
// fechaFormateada vale "Martes, 25. Abril 2023"

Ejemplo 3

Uso del método pasándole como parámetros la localización y otras opciones

var fecha = new Date();
var opciones = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
// Pasando algunas opciones y el locale como español de españa
var fechaFormateada = fecha.toLocaleDateString('es-ES', opciones);
// fechaFormateada vale "martes, 25 de abr de 2023"

Ejemplo 4

Uso del método pasándole como parámetros otra localización y otras opciones

var fecha = new Date();
var opciones = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
// Pasando algunas opciones y el locale como inglés de estados unidos
var fechaFormateada = fecha.toLocaleDateString('en-us', opciones);
// fechaFormateada vale "Tuesday, Apr 25, 2023"

Ejemplo 5

Dependiendo del orden de las opciones saldrá un resultado diferente (las opciones se imprimirán en orden inverso)

Opciones:

weekday: Día de la semana (short / long)
day: Número del día de la semana
month: Mes del año (short / long)
year: Año

var fecha = new Date();
// Pondremos en las opciones primero el año y luego el mes
var opciones1 = { year: 'numeric', month: 'short' };
var fechaFormateada = fecha.toLocaleDateString('es-ES', opciones1);
// fechaFormateada ahora vale "abr 2023"

// Pondremos en las opciones primero el día y luego el día de la semana
var opciones2 = { weekday: 'long', day: 'numeric' };
var fechaFormateada = fecha.toLocaleDateString('es-ES', opciones2);
// fechaFormateada ahora vale "Martes 25"

Método toGMTString

Devuelve un string con formato «Tue, 25 Apr 2023 14:17:11 GMT»

Ejemplo

var fecha = new Date();
var fechaFormateada = fecha.toGMTString();
// fechaFormateada vale "Tue, 25 Apr 2023 14:17:11 GMT"

Método toUTCString

Devuelve un string con formato «Tue, 25 Apr 2023 14:18:47 GMT»

Ejemplo

var fecha = new Date();
var fechaFormateada = fecha.toUTCString();
// fechaFormateada vale "Tue, 25 Apr 2023 14:18:47 GMT"

Método toISOString

Devuelve un string con formato «2023-04-25T14:19:40.012Z»

Ejemplo

var fecha = new Date();
var fechaFormateada = fecha.toISOString();
// fechaFormateada vale "2023-04-25T14:19:40.012Z"

Obtener la hora de una fecha

Ejemplo 1

Devuelve la hora con el formato «03:25» a partir de un objeto date

function getHoursFromDate(dateTime){
    var hour = dateTime.getHours() > 9 ? dateTime.getHours() : "0" + dateTime.getHours();
    var minutes = dateTime.getMinutes() > 9 ? dateTime.getMinutes() : "0" + dateTime.getMinutes();
    return hour + ":" + minutes;
}

Ejemplo 2

Devuelve la hora con el formato «03:25:59» a partir de un objeto date. El parámetro dateObject en este caso es opcional. El resultado es válido para cargar en un input de tipo time.

function parseDateToTimeString(dateObject = new Date()) {
    let hours = dateObject.getHours();
    hours = hours < 10 ? "0" + hours.toString() : hours;
    let minutes = dateObject.getMinutes();
    minutes = minutes < 10 ? "0" + minutes.toString() : minutes;
    let seconds = dateObject.getSeconds();
    seconds = seconds < 10 ? "0" + seconds.toString() : seconds;
    return hours + ":" + minutes + ":" + seconds;
}

Obtener la fecha dia/mes/año

Devuelve la fecha con formato «16/07/2023» a partir de un objeto date y un separador pasado por parámetro

Ejemplo

function getDateSpanishFromDate(dateTime, separator){
    var year = dateTime.getFullYear();
    var month = dateTime.getMonth() + 1;
    var month = month > 9 ? month : "0" + month;
    var day = dateTime.getDate() > 9 ? dateTime.getDate() : "0" + dateTime.getDate();
    return day + separator + month + separator + year;
}

Obtener la fecha día/mes/año horas:minutos

Devuelve la fecha con formato «16/07/2023 14:12» a partir de un objeto date y un separador pasado por parámetro

Ejemplo

function formatDateSpanish(dateTime, separator){
    var year = dateTime.getFullYear();
    var month = dateTime.getMonth() + 1;
    var month = month > 9 ? month : "0" + month;
    var day = dateTime.getDate() > 9 ? dateTime.getDate() : "0" + dateTime.getDate();
    var hour = dateTime.getHours() > 9 ? dateTime.getHours() : "0" + dateTime.getHours();
    var minutes = dateTime.getMinutes() > 9 ? dateTime.getMinutes() : "0" + dateTime.getMinutes();
    return day + separator + month + separator + year + "  " + hour + ":" + minutes;
}

Obtener la fecha año/mes/dia

Devuelve la fecha con formato «2023/07/16» a partir de un objeto date y un separador pasado por parámetro

Ejemplo 1

function getDateEnglishFromDate(dateTime, separator){
    var year = dateTime.getFullYear();
    var month = dateTime.getMonth() + 1;
    var month = month > 9 ? month : "0" + month;
    var day = dateTime.getDate() > 9 ? dateTime.getDate() : "0" + dateTime.getDate();
    return year + separator + month + separator + day;
}

Ejemplo 2

El resultado es válido para cargar en un input de tipo date. En este caso el parámetro dateObject es opcional. Si no se pone usa la fecha actual

function parseDateToDateString(separator, dateObject = new Date()) {
    let day = dateObject.getDate();
    day = day < 10 ? "0" + day.toString() : day;
    let month = dateObject.getMonth() + 1;
    month = month < 10 ? "0" + month.toString() : month;
    let year = dateObject.getFullYear();
    return year + separator + month + separator + day;
}

Obtener el primer día del mes actual

El resultado es un objeto date con la fecha del primer día del mes actual

Ejemplo

function firstDayActualMonth(){
    var today = new Date();
    var firstDayMonth = today.setDate(1);
    //console.log("Primer día: " + firstDayMonth.getDate());
    return new Date(firstDayMonth);
}

Obtener si una fecha está en el día de hoy

El resultado es true si la fecha pasada por parámetro está en el día de hoy. Si no devolverá false

Ejemplo

function checkIfDateIsToday(date){
    let result = false;
    let today = new Date();
    if(date.getDate() == today.getDate() && date.getMonth() == today.getMonth() && date.getFullYear() == today.getFullYear()){
        result = true;
    }
    return result;
}

Formatear fechas en JavaScript