Moment.js: una mejor biblioteca de fechas para JavaScript

    Como sabe cualquier programador experimentado, las fechas y horas son increíblemente comunes en la mayoría de los códigos de nivel de aplicación. Puede usar fechas para rastrear la creación de un objeto, para rastrear el tiempo desde que ocurrió un evento o para guardar la fecha de un evento próximo. Sin embargo, no es fácil trabajar con fechas, por lo que es importante tener una biblioteca que sea precisa y tenga una interfaz simple. El JavaScript estándar Date El objeto no es tan malo, pero carece de algunas características importantes y no siempre es fácil trabajar con él.

    En este artículo, verá cómo Moment hace que las fechas y las horas sean fáciles de analizar, formatear y manipular.

    Análisis de fechas

    Instrumentos de String

    De forma predeterminada, Moment intenta analizar las cadenas de fecha utilizando el ISO 8601 formato, que tiene una amplia gama de fechas válidas. Puede especificar tan poca o tanta precisión de tiempo como desee en su fecha y hora utilizando este formato. Esto es genial para nosotros, ya que las fechas pueden adoptar muchas formas diferentes, según el nivel de detalle que desee especificar.

    Considere intentar analizar todos estos formatos diferentes por su cuenta:

    • 20160628
    • 2016-06-28T09
    • 20160628T080910,123
    • 2016-06-28 09: 30: 26.123
    • 2016-06-28 09: 30: 26.123 + 07: 00

    Como puede ver, no solo cambia la precisión de tiempo, sino que el formato en el que se especifica puede variar ampliamente, por lo que es tan importante tener un analizador de tiempo capaz.

    En primer lugar, la forma más sencilla de crear un moment El objeto es llamar al constructor sin argumentos:

    > const moment = require('moment');
    > let m = moment();
    

    Esto instanciará un objeto de fecha con la hora actual.

    Para analizar una cadena de fecha y hora con Moment, simplemente pásala al constructor:

    > let date = moment('2016-06-28 09:30:26.123');
    

    Si por alguna razón Moment no puede analizar la cadena que le dio, entonces recurrirá a la función incorporada new Date() objeto para analizar.

    Para verificar si su fecha fue analizada y válida, use el .isValid() método:

    > moment('2016-06-28 09:30:26.123').isValid();
    true
    > moment('derp').isValid();
    false
    

    Para todos los objetos de fecha creados con Moment, no importa cómo los analice o cree, la zona horaria del objeto será la zona horaria actual predeterminada, a menos que se especifique directamente. Para recuperar las horas UTC, use moment.utc() en lugar. Para obtener más información sobre las zonas horarias, consulte la sección Zonas horarias de momento.

    Especificar formatos

    Una de mis funciones de análisis favoritas en Moment es el analizador de cadenas / formatos. Es básicamente como un formateador de cadenas inverso. Proporcionas la cadena de fecha y hora a analizar y otra cadena que especifica el formato en el que se encuentra. De esta manera, puedes usar cadenas de cualquier formato que desees y aún así usarlas cómodamente con Moment.

    Por ejemplo, en los EE.UU. (por alguna razón) nos gusta formatear nuestras fechas como «Mes / Día / Año», mientras que gran parte del resto del mundo formatea las suyas como «Día / Mes / Año». Esto deja mucho espacio para la confusión. Por ejemplo, ¿se supone que la fecha «11/06/2016» es el 6 de noviembre o el 11 de junio?

     

    Imagen: John Harding / Mona Chalabi vía El guardián

    Entonces, ¿cómo sabremos si sus fechas se están analizando correctamente? El uso de especificadores de formato como este garantiza que no haya ambigüedades en sus fechas, suponiendo que sepa de antemano en qué formato están. En el siguiente ejemplo, aún podemos analizar las fechas correctas a pesar de los formatos diferentes y potencialmente confusos.

    > let d1 = moment('11.06.2016', 'DD-MM-YYYY');
    > let d2 = moment('06/11/2016', 'MM-DD-YYYY');
    
    > d1.format();    // '2016-06-11T00:00:00-05:00'
    > d2.format();    // '2016-06-11T00:00:00-05:00'
    

    Observe que también usamos diferentes delimitadores en nuestras cadenas de fecha, «.» y «/». Moment en realidad ignora todos los caracteres no alfanuméricos cuando usa estos formatos, por lo que no siempre debe preocuparse por hacer coincidir los formatos a la perfección.

    Para obtener un conjunto completo de tokens de formato disponibles, consulte esta sección de los documentos de Moment.js.

    Marcas de tiempo de Unix

    Como era de esperar, Moment también es capaz de analizar fechas enteras (Tiempo Unix) también, ya sea en formato de segundos o milisegundos:

    > moment.unix(1467128085);      // Date in seconds from 1970
    > moment(1467128085747);        // Date in milliseconds from 1970
    

    La única diferencia en los tiempos resultantes es la precisión. millisecondDate tendrá un valor distinto de cero para el campo de milisegundos.

    Fechas de impresión

    En mi opinión, esta es una de las partes más útiles de Moment, principalmente porque JavaScript está integrado Date el objeto no tiene muy buen soporte para él. Sorprendentemente, la única forma integrada de formatear con Date es usar el Date.toLocaleDateString() método, que se siente bastante torpe y no tan flexible:

    > let d = new Date(1467128085747);
    > let options = {
    ...    weekday: 'long', year: 'numeric', month: 'short',
    ...    day: 'numeric', hour: '2-digit', minute: '2-digit'
    ... };
    
    > date.toLocaleTimeString('en-us', options);
    'Tuesday, Jun 28, 2016, 10:34 AM'
    

    Con Moment, podemos lograr fácilmente este mismo formato con solo una línea de código (que mostraré en la siguiente sección).

    Desglosaremos esto en algunas subsecciones. Primero, repasaremos el formato tradicional con tokens, luego mostraremos los formatos de fecha relativos disponibles (como «hace 18 minutos») y, finalmente, mostraremos cómo formatear las fechas como diferentes tipos de datos estructurados. como matrices, JSON o JavaScript simple Object.

    Formateo

    Utilizar el .format() método para mostrar la fecha como una cadena. Sin ningún argumento, imprime la cadena en la representación ISO 8601:

    > let date = moment.unix(1467128085);
    > date.format();
    '2016-06-28T10:34:45-05:00'
    

    De lo contrario, puede proporcionar su propio formato y personalizarlo a su gusto utilizando tokens.

    > date.format('dddd, MMMM Do YYYY, h:mm a');
    'Tuesday, June 28th 2016, 10:34 am'
    

    Puede notar que esta es la misma representación que la Date.toLocaleTimeString() ejemplo de arriba, pero en una línea. Y todo lo que necesitó fue la cadena ‘dddd, MMMM Do YYYY, h: mm a’.

    De nuevo, el lista completa de tokens de formato se puede encontrar en el sitio web de documentación muy completo de Moment.

    Formatos relativos

    A menudo, en aplicaciones web, por ejemplo, es útil mostrar al usuario cuánto tiempo ha transcurrido desde que ocurrió un evento. En lugar de calcularlo usted mismo, Moment ofrece algunas funciones de utilidad para manejar este formato por usted.

    En todos los casos, puede usar cualquier fecha del pasado o del futuro y la cadena devuelta reflejará el tiempo correcto.

    Fuera de la caja, obtienes algunas opciones diferentes:

    Tiempo a partir de ahora

    Suponiendo que la fecha de hoy es el 1 de julio de 2016, obtendría el siguiente formato relativo:

    > moment({year: 2016, month: 3, day: 13, hour: 10}).fromNow();
    '3 months ago'
    > moment({year: 2016, month: 9, day: 23, hour: 10}).fromNow();
    'in 4 months'
    

    Opcionalmente puede pasar un Boolean a .fromNow() diciéndole si debe incluir o no la cadena «ago» (o «in») en el formato. De esta manera, aún puede personalizar fácilmente la cadena relativa si es necesario.

    > moment({year: 2016, month: 3, day: 13, hour: 10}).fromNow(true);
    '3 months'
    

    Hora desde la fecha

    > let may = moment({year: 2016, month: 5, day: 3});
    > let october = moment({year: 2016, month: 10, day: 9});
    >
    > may.from(october);
    '5 months ago'
    > october.from(may);
    'in 5 months'
    

    Tiempo para ahora

    > moment({year: 2016, month: 3, day: 13, hour: 10}).toNow();
    'in 3 months'
    > moment({year: 2016, month: 9, day: 23, hour: 10}).toNow();
    '4 months ago'
    

    Tiempo hasta la fecha

    > let may = moment({year: 2016, month: 5, day: 3});
    > let october = moment({year: 2016, month: 10, day: 9});
    > may.to(october)
    'in 5 months'
    > 
    > october.to(may)
    '5 months ago'
    

    Es posible que haya notado que los métodos «desde» y «hasta» pueden intercambiarse, según las fechas que se pasen en el argumento. Todo es relativo.

    Fecha-horas estructuradas

    En algunos casos, puede ser más conveniente tener sus datos de fecha en un formato estructurado, posiblemente para su uso en un algoritmo o serialización. Moment ofrece algunas formas diferentes de formatear los datos en estructuras de datos:

    • hasta la fecha(): Devuelve la fecha del Momento como JavaScript. Date
    • toArray (): Devuelve datos de fecha como una matriz – [ 2016, 5, 28, 10, 34, 45, 747 ]
    • toJSON (): Devuelve la cadena de fecha ISO ajustada a UTC – «2016-06-28T15: 34: 45.747Z»
    • toISOString (): Devuelve la cadena de fecha ISO ajustada a UTC – «2016-06-28T15: 34: 45.747Z»
    • al objeto(): Devuelve un JavaScript simple Object con datos de fecha – {years: 2016, months: 5, date: 28, hours: 10, minutes: 34, seconds: 45, milliseconds: 747}
    • Encadenar(): Devuelve una cadena formateada similar a Date.toString() – «Mar 28 de junio de 2016 10:34:45 GMT-0500»

    Manipulación de fechas

    La capacidad de manipular fechas también es muy importante para muchas aplicaciones. Y esto tampoco es tan simple como su aritmética normal: manipular fechas es difícil. ¿Puedes averiguar fácilmente estas sumas / restas de fecha / hora? No es una tarea fácil de programar.

    • 21 de febrero + 13 semanas
    • 3:14 am + 424 minutos
    • 1 de julio – 1899400140 milisegundos

    Ahora, ¿y si es un año bisiesto? O un año con un segundo bisiesto? Por suerte para ti, no necesitas resolver esto tú mismo. Momento ya tiene para ti.

    Hay bastantes métodos de manipulación del tiempo, por lo que solo repasaremos los más utilizados:

    Sumar / Restar

    Use un número / cadena o un objeto para manipular la fecha:

    > moment().add(7, 'days');
    > moment().subtract({days:13, months:3});
    

    El encadenamiento también funciona bien:

    > moment().add({hours: 7}).subtract(13, 'minutes');
    

    Inicio / fin del tiempo

    Estos métodos de conveniencia establecen la fecha / hora al final de la unidad de tiempo dada. Por ejemplo, si tiene una cita con una hora de 2:15, pero necesita que sea el comienzo del día, usaría:

    > moment().startOf('day');
    

    Esto establecerá la hora a las 12:00 am del mismo día. Lo mismo funciona para año, mes, hora y muchos más.

    > moment().endOf('year');   // sets date to 12-31-2016 23:59:59.999
    

    Encontré que esto es muy útil en aplicaciones de informes donde los usuarios pueden seleccionar períodos de tiempo para los informes, como Google Analytics. Para recuperar los datos correctos, debe tener el rango correcto.

    Zonas horarias de momento

    Moment admite la configuración de compensaciones de zona horaria de forma inmediata, pero si necesita un mejor soporte de zona horaria, debería considerar usar moment-timezone.

    Esta biblioteca le permite especificar zonas horarias por ciudad, región u otros identificadores, lo que puede simplificar mucho las cosas para las aplicaciones orientadas al usuario.

    Para usarlo, instale con npm y require() esto en lugar de moment:

    > const moment = require('moment-timezone');
    

    Con más de 550 identificadores de zona horaria, puede dividir sus especificadores de zona horaria por varias categorías y nombres regionales:

    • Nombre de la zona horaria: EE.UU. / Central, EE.UU. / Este, EE.UU. / Montaña, etc.
    • Ciudad: America / Chicago, America / Los_Angeles, Asia / Dubai, Australia / Sydney, etc.
    • Desplazamiento GMT: Etc / GMT + 6, Etc / GMT-2, Etc / GMT0, etc.

    Para obtener una lista completa de identificadores de zona horaria, puede ver una lista completa de nombres ejecutando:

    > const moment = require('moment-timezone');
    > moment.tz.names()
    

    Para utilizar estos identificadores para establecer la hora y la zona horaria con el .tz() método:

    > moment.tz({year: 2016, month: 6, day: 30, hour: 11}, 'America/Los_Angeles').format();
    '2016-07-30T11:00:00-07:00'
    > moment.tz({year: 2016, month: 6, day: 30, hour: 11}, 'America/Chicago').format();
    '2016-07-30T11:00:00-05:00'
    

    Conclusión

    Trabajar programáticamente con fechas y horas es difícil, pero no tiene por qué ser lo más difícil que hagas. Moment es un gran ejemplo de una biblioteca que hace que un tema difícil sea mucho más simple con una API limpia y fácil de usar.

    Además del análisis, el formato y la manipulación que proporciona Moment, también hay soporte adicional para zonas horarias a través del moment-timezone paquete. Haga la vida más fácil para usted y sus usuarios agregando un mejor soporte para las zonas horarias.

    ¿Qué otras funciones de Moment usas a menudo? ¡Háznoslo saber en los comentarios!

     

    Etiquetas:

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *