2013-05-07 6 views
20

Ho una funzione che ottiene il numero di giorni fino ad oggi. Funziona comunque, sto usando moment.js per scrivere e formattare la data dai dati JSON e penso che stia causando un conflitto. C'è un modo per fare la stessa cosa usando moment.js?Conta giorni fino a oggi moment.js

Questo è il JavaScript di lavoro: http://jsfiddle.net/infatti/XeqPT/

// Count days due 
function daysUntil(year, month, day) { 
    var now = new Date(), 
     dateEnd = new Date(year, month - 1, day), // months are zero-based 
     days = (dateEnd - now)/1000/60/60/24; // convert milliseconds to days 

    return Math.round(days); 
} 

Come può la stessa cosa essere fatto utilizzando moment.js?


Se interessato, ecco come sto inserendo la data in cui non funziona.

<span class="due-date" data-bind="textualDate: DueDate"></span> 

ko.bindingHandlers.textualDate = { 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor()); 
     var textContent = moment(valueUnwrapped).format("MM/DD/YYYY"); 
     ko.bindingHandlers.text.update(element, function() { return textContent; }); 
    } 
}; 
+1

* "Sto usando moment.js per scrivere e formattare la data dai dati JSON e penso che stia causando un conflitto." * Perché pensi che? Il calcolo della data e l'output sono operazioni completamente indipendenti. –

+0

@ alex23 Ci sono molti motivi per utilizzare una libreria di date. La matematica data/ora è brutta e piena di casi limite (durata del mese variabile, fusi orari, ora legale, anni bisestili). –

+0

Quando inserisco manualmente la data in html, funziona. Quando collego i dati all'html, non funziona. – simple

risposta

34

Se il problema che hai è quella di utilizzare moment.js per ottenere la durata tra due date, quindi è possibile utilizzare la funzione diff in questo modo:

var a = moment([2007, 0, 29]); 
var b = moment([2007, 0, 28]); 
var diffInMs = a.diff(b); // 86400000 milliseconds 
var diffInDays = a.diff(b, 'days'); // 1 day 

Ora, I don' so se hai qualche problema con KnockoutJS, ma questo dovrebbe garantire che il tuo calcolo sia fatto con moment.js.

Proprio per il vostro interesse, mi sono fatto un gestore di binding personalizzato per la visualizzazione di una data del momento qualche tempo fa. La differenza con la tua è che il mio osservabile era già un oggetto momentaneo. Così, ho modificato il basso qui per farlo funzionare con gli oggetti di data standard di:

ko.bindingHandlers.moment = { 
     update: function(element, valueAccessor) { 
      var value = valueAccessor(); 
      var formattedValue = moment(ko.utils.unwrapObservable(value)).format('MM/DD/YYYY'); 
      $(element).text(formattedValue); 
     } 
    }; 

Edit: Ti ho fatto un fiddle con l'esempio.

1

Funziona per me - guarda questo violino - http://jsfiddle.net/tlarson/sBMTn/5. Potrebbe essere utile se tu potessi mostrarci un violino dove esiste il problema in modo che possiamo vedere cosa sta succedendo.

ecco il codice ho aggiunto:

var viewModel = { 
    firstDate: ko.observable("2013-7-1"), 
    secondDate: ko.observable("2013-9-1") 
}; 
ko.applyBindings(viewModel); 

E ho aggiornato il vostro codice di utilizzare il ViewModel:

<div id="paging1"> 
    <ul class="list paging-items"> 
     <li><!-- item --> 
      <h4>Due in <span class="days-due"></span> days</h4> 

      <h4><span data-bind="textualDate: firstDate" class="due-date"></span></h4> 
     </li><!-- #item --> 
     <li><!-- item --> 
      <h4>Due in <span class="days-due"></span> days</h4> 

      <h4><span data-bind="textualDate: secondDate" class="due-date"></span></h4> 
     </li><!-- #item --> 
    </ul> 
</div> 

Si noti che la chiamata per il metodo di jQuery each può agire solo su dati questo è già nel DOM. Quindi, essere sicuri di metterlo dopo che si chiama ko.applyBindings

Tuttavia ...

Si potrebbe voler considerare l'utilizzo di una calcolata piuttosto che utilizzare jQuery per una parte dei 'Due a X giorni della pagina. Ecco come è possibile: http://jsfiddle.net/tlarson/sBMTn/1