Dando formato a fechas con JavaScript

A veces dar formato a fechas podía llegar a ser un rollo. Digo podía, porque con Intl.DateTimeFormat ya no tenemos ni que pensar.

Quizás en ocasiones te hayan surgido preguntas como estas:

• ¿Cuál es el mejor formato para cierta situación?
• ¿Cuál es el formato habitual en el país donde la voy a mostrar?
• Si muestro el nombre del mes y/o del día, ¿tengo que traducirlos de alguna forma a cada idioma que necesite?

Todo esto y mucho más queda resuelto.

const fecha = new Date(Date.UTC(2022, 6, 15))

const formatoUSA = Intl.DateTimeFormat("en-US")
const formatoUK = Intl.DateTimeFormat("en-GB")
const formatoES = Intl.DateTimeFormat("es-ES")

console.log(formatoUSA.format(fecha)) // 7/15/2022
console.log(formatoUK.format(fecha)) // 15/07/2022
console.log(formatoES.format(fecha)) // 15/7/2022

Y podemos usar opciones para mostrar fechas con otros formatos:

const fecha = new Date(Date.UTC(2022, 6, 15))
const opciones = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
}

const formatoUSA = Intl.DateTimeFormat("en-US", opciones)
const formatoUK = Intl.DateTimeFormat("en-GB", opciones)
const formatoES = Intl.DateTimeFormat("es-ES", opciones)

console.log(formatoUSA.format(fecha)) // Friday, July 15, 2022
console.log(formatoUK.format(fecha)) // Friday, 15 July 2022
console.log(formatoES.format(fecha)) // viernes, 15 de julio de 2022

¿Y qué hay de zonas horarias? Pues lo mismo, en base a la fecha inicial en UTC podemos indicar zona horaria en las opciones:

const fecha = new Date(Date.UTC(2022, 6, 15, 10, 30, 0))
const opciones = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
  hour: "numeric",
  minute: "numeric",
  hour12: false,
}

// zonas horarias en https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
opciones.timeZone = "America/Los_Angeles"
const formatoUSA = Intl.DateTimeFormat("en-US", opciones)

opciones.timeZone = "Europe/Belfast"
const formatoUK = Intl.DateTimeFormat("en-GB", opciones)

opciones.timeZone = "Europe/Madrid"
const formatoES = Intl.DateTimeFormat("es-ES", opciones)

console.log(formatoUSA.format(fecha)) // Friday, July 15, 2022 at 03:30
console.log(formatoUK.format(fecha)) // Friday, 15 July 2022 at 11:30
console.log(formatoES.format(fecha)) // viernes, 15 de julio de 2022, 12:30

¿Fácil verdad? Solo necesitamos saber qué tipo de fecha queremos mostrar (larga, corta...), la zona horaria y poco más. JavaScript se encarga del resto. Si quieres ver más ejemplos de formatos entre diferentes paises, echa un ojo al post Dando formato a números en JavaScript.