web-dev-qa-db-ja.com

今日までの日数を数えるmoment.js

今日までの日数を取得する機能があります。しかし、それは機能しますが、私はmoment.jsを使用してJSONデータから日付を記述およびフォーマットしているので、競合を引き起こしていると思います。 moment.jsを使用して同じことを行う方法はありますか？

これが機能するJavaScriptです。 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);
}

Moment.jsを使用して同じことをどのように行うことができますか？

興味があれば、ここで私はそれがうまくいかない日付をどのように引き込んでいるかです。

<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

問題がmoment.jsを使用して2つの日付間の期間を取得することである場合、 diff を使用できます。このような機能：

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

今、KnockoutJSに問題があるかどうかはわかりませんが、これにより、計算がmoment.jsで確実に行われるはずです。

ちょうどあなたの興味のために、私は自分自身を少し前に瞬間の日付を表示するためのカスタムバインディングハンドラーにしました。あなたとの違いは、私のオブザーバブルはすでに瞬間オブジェクトだったことです。そこで、ここで標準の日付オブジェクトで動作するように変更しました。

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

編集：例で fiddle を作成しました。

42
Jalayn

私のために働く-このフィドルを参照してください- http://jsfiddle.net/tlarson/sBMTn/5 。何が起こっているのかを見ることができるように、問題が存在するフィドルを見せてくれると助かります。

追加したコードは次のとおりです。

var viewModel = {
    firstDate: ko.observable("2013-7-1"),
    secondDate: ko.observable("2013-9-1")
};
ko.applyBindings(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>

JQueryのeachメソッドへの呼び出しは、すでにDOMにあるデータにのみ作用することに注意してください。したがって、ko.applyBindingsを呼び出した後に必ず配置してください

しかしながら...

ページの「X日以内の期限」の部分にjQueryを使用するのではなく、計算済みの使用を検討することをお勧めします。以下にその方法を示します。 http://jsfiddle.net/tlarson/sBMTn/1

1
CodeThug