tutorial_moment_js.html

<h2><a href="#/documents.html">Artículos:</a> <a href="#/tutorials">Tutoriales</a></h2>


<h3>Manipulación de fechas y horas en javascript con moment.js</h3>

<p>
Una de las tareas con las que se encuentra frecuentemente un desarrollador es la de manipular de una manera sencilla fechas, horas e intervalos de tiempo.
</p>
<p>
En todos los lenguajes de programación se tiene acceso a algún tipo de timestamp, usualmente representado como un tipo numérico sin signo de 32 bits. En javascript, corresponde al tipo de dato <strong>long</strong> y una manera de obtenerlo y manipularlo es a través de la clase Date, ya sea como <code>new Date(); </code> o como <code>Date.now()</code>.
</p>

<p>
La clase <strong>Date</strong> provee métodos utilitiarios para transformar a cadenas de texto con formato, y para parsear dichas cadenas a la representación interna. Estas funciones suelen quedarse cortas a la hora de suplir las necesidades de un desarrollador, por lo que se recurre a escribir rutinas propias o buscar librerías que ofrezcan los métodos requeridos.
</p>

<h4>Moment.js</h4>

<p>La librería <a href="http://momentjs.com/">Moment.js</a> es una de estas librerías que puede ser usada tanto en lado cliente (navegador web) como en lado servidor (node.js).</p>

<p><strong>Moment.js</strong> se diferencia de librerías similares en que provee sus propios tipos de objetos (moment, duration, etc) en vez de enriquecer la clase Date. Otro aspecto diferenciador es el estilo de programación que recuerda los mecanismos de programación funcional de lenguajes como ruby.</p>

<h4>Problema a resolver</h4>

<p>El problema que se quiere resolver contiene los siguientes pasos: </p>

        <ol>
            <li>Obtener el tiempo actual y presentarlo de manera amigable.</li>
            <li>Agregarle al tiempo actual un periodo de tiempo arbitrario, en milisegundos.</li>
            <li>Presentar de manera amigable el intervalo de tiempo transcurrido.</li>
            <li>Presentar de manera amigable el instante final, luego de agregar el periodo adicional.</li>
        </ol>

<h4>Estrategia de solución</h4>

<ol>
<li>
El tiempo actual puede obtenerse usando el tradicional Date.now(), que retorna un long. Para presentarlo al usuario, se puede crear un objeto moment pasando el long recién obtenido, y usar el método <code>format</code>.
</li>
<li>
Para representar un intervalo de tiempo, se puede pasar el valor en milisegundos a un objeto de tipo <code>moment.duration.</code>
</li>
<li>
El objeto <code>moment.duration</code> posee el método <code>humanize</code>, que se encarga de generar una cadena de texto con una representación amigable del intervalo en cuestión. Incluso representa de manera apropiada intervalos negativos!
</li>
<li>
Sumando el intervalo al tiempo base calculado para el primer paso, se obtiene un nuevo <code>timestamp</code> que puede ser pasado al método <code>moment.format</code> como se hizo en el primer paso.
</li>
</ol>

 <p>El siguiente jsfiddle contiene el código del ejercicio propuesto:</p>

<iframe width="100%" height="400" src="http://jsfiddle.net/cesarpachon/RxG6q/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>