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)

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

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

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

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

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.

// 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.

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