javascript - hours - moment to timestamp

¿Cómo usar Moment.js?

Question

No puedo seguir la documentación de Moment.js y necesito ayuda para configurarlo. He referenciado correctamente el archivo moment.min.js en mi página web como:

<script src="/js/moment.min.js"></script>

Llegando a la parte HTML de mi página web, tengo dos fechas diferentes en la misma página:

Fecha de Publicación

<time class="pubdate" datetime="2012-06-09T12:32:10-04:00" pubdate>
    June 09, 2012
</time>

Última fecha de modificación

<time class="updated" itemprop="dateModified" datetime="2012-06-09T12:32:10-04:00">
    June 9, 2012 ~ 12:32
</time>

¡Importante! El análisis de fecha relativa no debe ir más allá de "ayer". En cuanto a todo lo que está más allá, las etiquetas <time> deben mostrar las <time> exactas que mostrarían sin el JavaScript, es decir, Moment.js no debe tocar ni analizar las fechas pasadas de "ayer".

Ahora, para hacer que la biblioteca haga su trabajo como se mencionó anteriormente, necesito llamar a una función después de la referencia de la biblioteca. Entonces, la pregunta es, ¿cuál debería ser la función? (Usar jQuery está bien, ya que hago referencia a la biblioteca en mi página web).

Answer 1

Extendiendo la implementación de @ its_me más arriba, aquí hay una versión que

• actualiza todos los elementos con una clase dada
• los mantiene actualizados cada minuto (por lo que ''hace 1 minuto'' se convierte en ''hace 2 minutos'')
• cambia a un formato diferente cuando hace + -1 día a partir de ahora (p. ej., el último martes a las 11:45 PM)

Aquí hay un JSFiddle para que juegues.

Su HTML:

<time class="cw-relative-date" datetime="2014-06-09T12:32:10-00:00"></time>

El JS incluirá:

(function () {

// Define a function that updates all relative dates defined by <time class=''cw-relative-date''>
var updateAllRelativeDates = function() {
        $(''time'').each(function (i, e) {
            if ($(e).attr("class") == ''cw-relative-date'') {

                // Initialise momentjs
                var now = moment();
                moment.lang(''en'', {
                    calendar : {
                        lastDay : ''[Yesterday at] LT'',
                        sameDay : ''[Today at] LT'',
                        nextDay : ''[Tomorrow at] LT'',
                        lastWeek : ''[Last] dddd [at] LT'',
                        nextWeek : ''dddd [at] LT'',
                        sameElse : ''D MMM YYYY [at] LT''
                    }
                });

                // Grab the datetime for the element and compare to now                    
                var time = moment($(e).attr(''datetime''));
                var diff = now.diff(time, ''days'');

                // If less than one day ago/away use relative, else use calendar display
                if (diff <= 1 && diff >= -1) {
                    $(e).html(''<span>'' + time.from(now) + ''</span>'');
                } else {
                    $(e).html(''<span>'' + time.calendar() + ''</span>'');
                }
            }
        });
    };

// Update all dates initially
updateAllRelativeDates();

// Register the timer to call it again every minute
setInterval(updateAllRelativeDates, 60000);

})();

Answer 2

Gracias a @ JohannesKlauß por el código. Esta es básicamente la forma en que ejecuté su respuesta y cómo hago referencia al código en mi sitio web.

<script src="/js/moment.min.js"></script>
<script src="/js/moment.executor.js"></script>

Donde, moment.min.js es la biblioteca de Moment.js, y moment.executor.js tiene este código (cortesía de Johannes):

jQuery(document).ready(function($){

    var now = moment();

    $(''time'').each(function(i, e) {
        var time = moment($(e).attr(''datetime''));

        if(now.diff(time, ''days'') <= 1) {
            $(e).html(''<span>'' + time.from(now) + ''</span>'');
        }
    });

});

PS: Realmente puedes editar moment.min.js y agregar el código antes mencionado directamente al final. De esta manera, estarás guardando una solicitud HTTP adicional. :PAG

Answer 3

Por favor, especifique su pregunta. Supongo que desea un análisis de fecha relativa y que el máximo debería ser "ayer".

Nunca utilicé moment.js pero, por lo que dicen los documentos, es bastante simple.

Utilice var now = moment(); como su fecha actual. Luego, analice cada time etiqueta en su DOM con var time = moment($(e).attr(''datetime''));

Para verificar la diferencia usa el método diff() :

if(now.diff(time, ''days'') <= 1) {
    // getting the relative output
}

Use var ago = now.from(time) para obtener la salida relativa y reemplace el tiempo en su DOM con su variable ago .

Actualización basada en el comentario :

Bien, bien sin probar, pero esa es la idea básica:

Se actualizó el código.

var now = moment();

$(''time'').each(function(i, e) {
    var time = moment($(e).attr(''datetime''));

    if(now.diff(time, ''days'') <= 1) {
        $(e).html(''<span>'' + time.from(now) + ''</span>'');
    }
});

Answer 4

También puede usar la función moment().calendar() , que se formateará para las fechas cercanas a hoy (hasta una semana a partir de hoy):

$(''time'').each(function(i, e) {
  var time = moment($(e).attr(''datetime''));

  $(e).html(''<span>'' + time.calendar() + ''</span>'');
});​

Puedes personalizar las cadenas de formato con este código:

moment.calendar = {
  lastDay : ''[Yesterday at] LT'',
  sameDay : ''[Today at] LT'',
  nextDay : ''[Tomorrow at] LT'',
  lastWeek : ''[last] dddd [at] LT'',
  nextWeek : ''dddd [at] LT'',
  sameElse : ''L''
};

Si no está interesado en dar formato a las fechas anteriores a ayer, simplemente cambie los formatos de lastWeek y nextWeek al nextWeek completo de fecha y hora (por ejemplo, ''L'' ).

ACTUALIZACIÓN 2013-09-06 Aparentemente tiene una nueva sintaxis que también le permite localizarla:

moment.lang(''en'', {
  calendar: {
    lastDay : ''[Yesterday at] LT'',
    sameDay : ''[Today at] LT'',
    nextDay : ''[Tomorrow at] LT'',
    lastWeek : ''[last] dddd [at] LT'',
    nextWeek : ''dddd [at] LT'',
    sameElse : ''L''
  }
});