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 *