Cómo dar formato a las 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, Twitter o incluso en artículos de abuso de pila, inevitablemente hay una cadena de fecha / hora en algún lugar de la página. En muchos casos, especialmente en las aplicaciones que han generado contenido de front-end dinámicamente, las fechas se formatean con código JavaScript. Entonces, 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 utilizar para formatear fechas en JavaScript. Dado que hay un par de formas diferentes de lograr esto, las he enumerado en orden de mis preferencias personales. Sin embargo, es posible que una de las siguientes soluciones no funcione para su aplicación por una razón u otra, en cuyo caso puede buscar más abajo en la lista algo que se adapte mejor a sus necesidades.

Moment.js

Moment.js es ampliamente considerado 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 un tamaño inferior a 20 kb (minificado, 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 ventaja bastante grande considerando que solo necesita aprender una sola biblioteca de fecha y hora, independientemente de si está programando el front o el back-end.

Antes de comenzar a dar formato a las fechas, usemos Node REPL para ver un breve moment cebador:

> 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: A Better Date Library 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 utilizar el .format() método sin argumentos:

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

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

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

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

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

> 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:

• [The time is]: Todo el texto entre corchetes ([]) es ignorado por el analizador
• h: Horas (sin cero a la izquierda)
• mm: Minutos (con cero a la izquierda)
• ss: Segundos (con cero a la izquierda)
• a: ante / post meridiem (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 a la izquierda (01, 02, 03 … 12)
• MMM: Abreviatura del mes (enero, febrero, marzo … diciembre)
• MMMM: Nombre del mes (enero, febrero, marzo … diciembre)

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

También hay un gran soporte para ambas zonas horarias y para personalizar fechas formateadas por diferentes configuraciones regionales. 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 le sugiero que lo revise. Aunque, no todos pueden soportar agregar 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 dateformat

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

Lado del navegador

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

Con el Versión de Node.js, funciona de forma un poco diferente. En lugar de extender Date.prototype para incluir format(), debes usar dateformat como un método en sí mismo y pasar tu Date objeto:

Node.js

> 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'

Aparte de cómo se llama al método de formato, todo el formato del token funciona igual 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 al formato de 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:

Node.js

> 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 (enlazada arriba) para ver una lista completa.

También puede encontrar que esta biblioteca sea más adecuada gracias a su pequeño tamaño. El archivo tiene solo 1,2 KB cuando está minificado y comprimido con gzip. No está mal considerando el beneficio que brinda.

Date.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 fechas, por lo que puede resultar útil en algún momento en el futuro.

Usando el incorporado Date.toLocaleString() El método es una forma libre de dependencias de 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 puede que no sea una buena opción después de todo (a menos que esté usando Node). De todos modos, veamos cómo funciona.

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

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

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, usando el .toLocaleString() El método 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
• year: numérico, 2 dígitos
• month: numérico, de 2 dígitos, estrecho, corto, largo
• day: numérico, 2 dígitos
• hour: numérico, 2 dígitos
• minute: numérico, 2 dígitos
• second: numérico, 2 dígitos

El mismo efecto de formato se puede lograr con .toLocaleString(), pero solo 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 debe evaluar cuál funciona mejor para usted.

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