web-dev-qa-db-fra.com

Comptez les jours jusqu'à aujourd'hui moment.js

J'ai une fonction qui obtient le nombre de jours jusqu'à aujourd'hui. Cela fonctionne cependant, j'utilise moment.js pour écrire et formater la date à partir des données JSON et je pense que cela provoque un conflit. Existe-t-il un moyen de faire la même chose en utilisant moment.js?

Voici le JavaScript de travail: 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);
}

Comment faire la même chose en utilisant moment.js?

Si vous êtes intéressé, voici comment je tire la date à laquelle cela ne fonctionne pas.

<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; });
    }
};
javascriptjqueryknockout.jsmomentjs
22
simple

Si le problème que vous rencontrez est d'utiliser moment.js pour obtenir la durée entre deux dates, vous pouvez utiliser le diff fonctionner comme ceci:

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

Maintenant, je ne sais pas si vous avez un problème avec KnockoutJS, mais cela devrait garantir que votre calcul se fait avec moment.js .

Juste pour votre intérêt, je me suis fait un gestionnaire de liaison personnalisé pour afficher une date de moment il y a quelque temps. La différence avec la vôtre est que mon observable était déjà un objet instantané. Donc, je l'ai modifié ici pour le faire fonctionner avec des objets de date standard:

    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: je vous ai fait un violon avec l'exemple.

42
Jalayn

Fonctionne pour moi - voir ce violon - http://jsfiddle.net/tlarson/sBMTn/5 . Il pourrait être utile de nous montrer un violon où le problème existe afin que nous puissions voir ce qui se passe.

Voici le code que j'ai ajouté:

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

Et j'ai mis à jour votre balisage pour utiliser le 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>

Notez que votre appel à la méthode each de jQuery ne peut agir que sur les données qui sont déjà dans le DOM. Assurez-vous donc de le mettre après avoir appelé ko.applyBindings

Pourtant...

Vous voudrez peut-être envisager d'utiliser un calcul plutôt que d'utiliser jQuery pour la partie "Dû dans X jours" de la page. Voici comment vous pouvez le faire: http://jsfiddle.net/tlarson/sBMTn/1

1
CodeThug