23

我有一个函数可以获取到今天为止的天数。但是它可以工作，我正在使用 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; });
    }
};
4

2 回答 2

45

如果您遇到的问题是使用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完成的。

只是为了您的兴趣，我为自己制作了一个自定义绑定处理程序，用于显示前一段时间的某个时刻。与您的不同之处在于，我的 observable 已经是一个 moment 对象。因此，我在此处对其进行了修改，以使其适用于标准日期对象：

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

编辑：我让你摆弄了这个例子。

于 2013-05-07T17:26:01.313 回答
1

为我工作 - 看到这个小提琴 - 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>

请注意，您对 jQueryeach方法的调用只能作用于 DOM 中已经存在的数据。所以一定要在打电话后放ko.applyBindings

然而...

您可能要考虑对页面的“Due in X days”部分使用计算而不是使用 jQuery。您可以这样做：http: //jsfiddle.net/tlarson/sBMTn/1

于 2013-05-07T20:09:08.377 回答