Formatos de fechas y horas en Javascript

fernandochata

Fernando Chata

Posted on August 2, 2020

Formatos de fechas y horas en Javascript

Ojalá las cosas fuesen simples al hablar de fechas, lo común es:

const date = new Date();
console.log(date);
// Sun Aug 02 2020 14:54:33 GMT-0400 (hora estándar de Chile)
Enter fullscreen mode Exit fullscreen mode

Usando toLocaleDateString()

Claro tanto texto no se vería bien, si queremos "embellecer" nuestros formatos de salida debemos usar toLocaleDateString() y obtendremos algo como:

const formatFullDate = date.toLocaleDateString()
// 2/8/2020
Enter fullscreen mode Exit fullscreen mode

mejor, pero quería la versión larga, entonces le agregamos algunas opciones:

const formatFullDate = date.toLocaleDateString("es-CL", {
     weekday: "long", // narrow, short
     year: "numeric", // 2-digit
     month: "short", // numeric, 2-digit, narrow, long
     day: "numeric" // 2-digit
});
console.log(formatFullDate);
// domingo, 2 de ago. de 2020
Enter fullscreen mode Exit fullscreen mode

ahí si, como se ven existen varias opciones, veamos

  • es-CL: corresponde al idioma y al país
  • narrow: devuelve la primera letra, por ejemplo, si fuese un domingo el resultado es sería una letra "D"
  • long: devuelve la palabra completa
  • short: devuelve la versión corta de la palabra, en el ejemplo devolvería la abreviación "dom"
  • 2-digit: obliga a devolver dos dígitos, si el día es menor de 10 devuelve el dia con un cero adelante, en caso de los años, devuelve los dos últimos dígitos

Si nos encontrasemos en EEUU el resultado sería:

const formatFullDate = date.toLocaleDateString("en-ES", {
     weekday: "long", // narrow, short
     year: "numeric", // 2-digit
     month: "short", // numeric, 2-digit, narrow, long
     day: "numeric" // 2-digit
});
// Sunday, Aug 2, 2020
Enter fullscreen mode Exit fullscreen mode

como se ve el formato inglés es diferente al formato español.

Usando toLocaleTimeString()

Ahora veamos las horas, para esto se usa toLocaleTimeString()

const form = date.toLocaleTimeString();
// 16:05:04
Enter fullscreen mode Exit fullscreen mode

bien, bien, pero quizá queramos ver el AM o PM, o quizá nuestro país tiene diferentes zonas de horarias, por ejemplo en Chile, donde vivo, tenemos la Isla de Pascua, allá tienen dos hora de diferencia dependiendo del horario de invierno o verano, entonces tendré que agregar algunas opciones:

// hora continental - Santiago de Chile
const formatFullTime = date.toLocaleTimeString("es-CL", {
     timeZone: "America/Santiago",
     hour12: true, // false
     hour: "numeric", // 2-digit
     minute: "2-digit", // numeric
     second: "2-digit" // numeric
});
console.log(formatFullTime);
// 4:28:45 p. m.
Enter fullscreen mode Exit fullscreen mode
// hora insular - Isla de Pascua
const formatFullTime = date.toLocaleTimeString("es-CL", {
     timeZone: "Pacific/Easter",
     hour12: true, // false
     hour: "numeric", // 2-digit
     minute: "2-digit", // numeric
     second: "2-digit" // numeric
});
console.log(formatFullTime);
// 2:28:45 p. m.
Enter fullscreen mode Exit fullscreen mode

encontramos nuevas opciones, como:

  • timeZone: corresponde a la hora horaria que queremos visualizar, por ejemplo en Estados Unidos sería algo como "America/Los_angeles" o "America/New_york"
  • hour12: si queremos visualizar la hora en formato de 12 horas (agregando el AM o PM) la opción será "true" o en caso contrario de 24 horas
💖 💪 🙅 🚩
fernandochata
Fernando Chata

Posted on August 2, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related