数天直到今天moment.js

时间:2013-05-07 17:05:33

标签: javascript jquery knockout.js momentjs

我有一个功能,可以获得直到今天的天数。但它工作正常,我使用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; });
    }
};

2 个答案:

答案 0 :(得分:41)

如果您遇到的问题是使用 moment.js 来获取两个日期之间的持续时间,那么您可以使用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

答案 1 :(得分:1)

适合我 - 看到这个小提琴 - http://jsfiddle.net/tlarson/sBMTn/5。如果您能向我们展示存在问题的小提示,以便我们可以看到正在发生的事情,这可能会有所帮助。

以下是我添加的代码:

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

我更新了你的标记以使用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

后提出

...然而

您可能需要考虑使用计算而不是使用jQuery来处理页面中的“在X天内到期”部分。您可以通过以下方式执行此操作:http://jsfiddle.net/tlarson/sBMTn/1