Cómo formatear fechas en JavaScript

Especialmente para las aplicaciones web, formatear una fecha es una tarea bastante común. Eche un vistazo a casi cualquier sitio web, ya sea un cliente de correo electrónico como Gmail, Twit...

Especialmente para las aplicaciones web, formatear una fecha es una tarea bastante común. Eche un vistazo a casi cualquier sitio web, ya sea un cliente de correo electrónico como Gmail, Twitter o incluso en artículos de Stack Abuse, inevitablemente hay una cadena de fecha/hora en algún lugar de la página. En muchos casos, especialmente en las aplicaciones que tienen contenido de front-end generado dinámicamente, las fechas se formatean con código JavaScript. Así que diría que es seguro asumir que esta es una tarea que encontrará con bastante frecuencia.

Cada una de las siguientes secciones describe un método (o biblioteca) que puede usar para formatear fechas en JavaScript. Dado que hay un par de formas diferentes de lograr esto, las he enumerado en orden de preferencia personal. Sin embargo, es posible que una de las siguientes soluciones no funcione para su aplicación por un motivo u otro, en cuyo caso puede buscar más abajo en la lista algo que se adapte mejor a sus necesidades.

Momento.js

Momento.js es ampliamente considerada como la mejor biblioteca de fecha y hora para JavaScript, y por una buena razón. Es extremadamente fácil de usar, está bien documentado y tiene menos de 20 kb (minimizado, comprimido con gzip). Funciona tanto con Node.js como con JavaScript del lado del navegador, lo que le permite usarlo en todo su código base. Esta es una gran ventaja teniendo en cuenta que solo necesita aprender una única biblioteca de fecha y hora, independientemente de si está programando el front-end o el back-end.

Antes de entrar en el formato de las fechas, usemos Node REPL para ver un breve resumen de momento:

1
2
3
4
> const moment = require('moment');
> let m = moment();                 // Create a new date, which defaults to the current time
> m = moment('2016-08-02 15:37');   // Parse an ISO 8601 date string
> m.month(9);                       // Set month to October - months are 0-indexed!

Hay bastantes formas de crear, analizar y manipular fechas con Moment, que no cubriremos por completo aquí. Para obtener una buena descripción general de la biblioteca en su conjunto, consulte nuestro artículo, Moment.js: una mejor biblioteca de citas para JavaScript .

Ahora que sabe aproximadamente cómo usar Moment para crear y manipular fechas, veamos cómo usarlo para formatear sus fechas como cadenas.

La forma más sencilla de empezar es usar el método .format() sin argumentos:

1
2
> moment().format();
'2016-08-02T15:44:09-05:00'

Esto imprimirá una fecha formateada en el estándar ISO 8601. Sin embargo, a menos que esté imprimiendo la fecha para guardarla en JSON o algo similar, probablemente no quiera que sus usuarios tengan que lidiar con fechas que se vean así. Usando fichas de formato, las fechas se pueden personalizar a su gusto.

Si llegó a JavaScript desde otro lenguaje como Java o Python, entonces probablemente estará familiarizado con el concepto de tokens de formato de fecha. Aunque, una palabra de advertencia, no asuma que los tokens de otro idioma son exactamente los mismos que los que se usan en Moment. Primero debe consultar los documentos, ya que hay bastantes diferencias.

Con el método .format(), puede construir una cadena de tokens que se refieren a un componente particular de una fecha (como día, mes, minuto o am/pm).

Por ejemplo, supongamos que solo desea ver una representación simple de la hora actual (horas:minutos:segundos am/pm). Esto lo podemos lograr con:

1
2
> moment().format('[The time is] h:mm:ss a');
'The time is 4:47:09 pm'

Aquí hay un desglose de los tokens que ve arriba:

  • [La hora es]: el analizador ignora todo el texto entre paréntesis ([])
  • h: Horas (sin cero inicial)
  • mm: Minutos (con cero inicial)
  • ss: Segundos (con cero inicial)
  • ``a`’: antes/tarde (am/pm)

El analizador ignora todo el texto entre corchetes y los caracteres no alfanuméricos, como los dos puntos (':'). De esta manera, puede agregar formato a sus cadenas.

Las cadenas de formato pueden volverse un poco más complicadas que nuestro ejemplo anterior. Por ejemplo, si desea imprimir el mes, hay 5 formas de hacerlo:

  • M: Número de mes (1, 2, 3... 12)
  • Mo: Número de mes con indicador ordinal (1º, 2º, 3º... 12º)
  • MM: Número de mes con cero inicial (01, 02, 03... 12)
  • MMM: abreviatura del mes (ene, feb, mar... dic)
  • MMMM: Nombre del mes (enero, febrero, marzo... diciembre)

La lista de opciones se vuelve mucho más larga cuando considera las muchas variaciones para el día del mes, el día de la semana, la hora, el año, etc. Una vez que aprende el concepto y juega un poco con él, el resto es fácil. Aunque puede ser fácil olvidar los tokens, mantenga la referencia a mano cuando programe.

También hay un gran soporte para ambas zonas horarias y para personalizar fechas formateadas por diferentes lugares. Por lo general, esto no es un gran problema para las aplicaciones pequeñas, pero puede ser un gran problema para las más grandes. Si necesita apoyar la internacionalización, Moment será un salvavidas para usted.

Moment es, con mucho, mi forma favorita de manejar, manipular y formatear cadenas en JavaScript, por lo que recomiendo encarecidamente que lo compruebe. Aunque, no todo el mundo puede tolerar la adición de dependencias adicionales, especialmente para el desarrollo front-end, lo que significa que es posible que deba probar una de las siguientes dos opciones de formato a continuación.

El paquete de formato de fecha

dateformat es similar a Moment en que da formato a las fechas usando cadenas de tokens, pero lo hace de manera un poco diferente. Usando la versión del navegador de datetime, extenderá el objeto Date para tener un método .format(), que funciona de forma muy parecida al método de formato de Moment:

Lado del navegador

1
2
today = new Date();
today.format('dd-m-yy');   // Returns '02-8-16'

Con la Versión de Node.js, funciona un poco diferente. En lugar de extender Date.prototype para incluir format(), debe usar dateformat como método y pasar su objeto Date:

Nodo.js

1
2
3
4
> const dateformat = require('dateformat');
> let now = new Date();
> dateformat(now, 'dddd, mmmm dS, yyyy, h:MM:ss TT');
'Tuesday, August 2nd, 2016, 5:45:19 PM'

Además de cómo llame al método de formato, todo el formato de token funciona de la misma manera entre el navegador y las versiones de Node.js.

Otro beneficio de usar dateformat son sus formatos con nombre. Si bien todos tienen sus propias preferencias en cuanto a cómo se formatean las fechas, en realidad solo hay unos pocos formatos diferentes que la mayoría de la gente usa. Esta biblioteca tiene como objetivo evitar toda la duplicación de trabajo al proporcionar formatos de fecha comunes por nombre:

Nodo.js

1
2
3
4
5
6
> const dateformat = require('dateformat');
> let now = new Date();
> dateformat(now, 'fullDate');
'Tuesday, August 2, 2016'
> dateformat(now, 'longTime');
'5:45:19 PM CDT'

Se proporcionan más de 10 de estos formatos con nombre. Consulte la documentación (vinculada arriba) para ver una lista completa.

También puede encontrar que esta biblioteca es más adecuada gracias a su pequeño tamaño. El archivo tiene solo 1,2 KB cuando se minimiza y se comprime con gzip. No está mal teniendo en cuenta el beneficio que proporciona.

Fecha.toLocaleString()

Ahora, aunque no recomiendo usar este método, sé que, según las limitaciones del proyecto, esta podría ser su única opción. También es importante señalar esto teniendo en cuenta que esta es la única forma integrada de formatear cadenas de fecha, por lo que puede ser útil en algún momento del camino.

Usar el método incorporado Date.toLocaleString() es una forma libre de dependencias para formatear sus fechas y horas. Sin embargo, no es compatible con Safari y solo es compatible con versiones posteriores de los otros navegadores principales, por lo que podría no ser una buena opción después de todo (a menos que esté usando Node). De todos modos, vamos a ver cómo funciona.

En lugar de usar cadenas de tokens como en las bibliotecas anteriores, aquí usamos un objeto opciones donde se puede configurar cada parte de su fecha.

Por ejemplo, en lugar de mm para una hora de 2 dígitos, usaríamos {hora: '2 dígitos'}. Lo mismo ocurre con todos los demás componentes de una fecha, como día de la semana, año, mes, día, etc.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
let now = new Date();

let options = {
    weekday: 'long',
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
};

now.toLocaleString('en-us', options);   // Returns 'Tuesday, Aug 2, 2016, 6:03 PM'

Como puede ver, usar el método .toLocaleString() es mucho más detallado que los otros métodos de formato que hemos visto a lo largo de este artículo.

Algunos de los componentes de fecha más comunes que puede establecer en el objeto de opciones (y sus posibles valores) son:

  • weekday: estrecho, corto, largo
  • año: numérico, 2 dígitos
  • mes: numérico, de 2 dígitos, estrecho, corto, largo
  • día: numérico, 2 dígitos
  • hora: numérico, 2 dígitos
  • minuto: numérico, 2 dígitos
  • segundo: numérico, 2 dígitos

El mismo efecto de formato se puede lograr con .toLocaleString(), pero requiere un poco más de esfuerzo.

Conclusión

JavaScript/Node.js tiene bastantes bibliotecas que pueden formatear cadenas de fecha por usted, pero solo mostré algunos de los métodos más populares en este artículo. Cada uno tiene sus propias ventajas, por lo que debes evaluar cuál funciona mejor para ti.

¿Qué biblioteca de fecha y hora prefiere? ¿Hay alguno no mencionado aquí que debería haber sido? ¡Cuéntanos en los comentarios!