2013-05-07 106 views
20

Tôi có một hàm nhận số ngày cho đến ngày hôm nay. Nó hoạt động tuy nhiên, tôi đang sử dụng moment.js để viết và định dạng ngày từ dữ liệu JSON và tôi nghĩ rằng nó đang gây ra xung đột. Có cách nào để làm điều tương tự bằng cách sử dụng moment.js không?Đếm ngày cho đến hôm nay moment.js

Đây là JavaScript làm việc: 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); 
} 

Làm thế nào điều tương tự có thể được thực hiện bằng moment.js?


Nếu quan tâm, đây là cách tôi kéo vào ngày khi nó không hoạt động.

<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

* "Tôi đang sử dụng moment.js để viết và định dạng ngày từ dữ liệu JSON và tôi nghĩ rằng nó đang gây ra một cuộc xung đột." * Tại sao bạn nghĩ rằng? Tính toán ngày tháng và xuất nó là các hoạt động hoàn toàn không liên quan. –

+0

@ alex23 Có rất nhiều lý do để sử dụng thư viện ngày. Ngày/giờ toán học là xấu xí, và đầy đủ các trường hợp cạnh (độ dài tháng biến, múi giờ, tiết kiệm ánh sáng ban ngày, năm nhuận). –

+0

Khi tôi đặt ngày vào html theo cách thủ công, nó hoạt động. Khi tôi kết nối dữ liệu vào html, nó không hoạt động. – simple

Trả lời

34

Nếu vấn đề bạn có là sử dụng moment.js để có được những khoảng thời gian giữa hai ngày, sau đó bạn có thể sử dụng chức năng diff như thế này:

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 

Bây giờ, tôi don' t biết nếu bạn có bất kỳ vấn đề với KnockoutJS, nhưng điều này sẽ đảm bảo rằng tính toán của bạn được thực hiện với moment.js.

Chỉ vì sự quan tâm của bạn, tôi đã tự tạo cho mình một trình xử lý ràng buộc tùy chỉnh để hiển thị ngày tháng một thời gian trước đây. Sự khác biệt với bạn là sự quan sát của tôi đã là một vật thể thời điểm. Vì vậy, tôi đã sửa đổi nó xuống đây để làm cho nó làm việc với các đối tượng ngày tiêu chuẩn:

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: Tôi làm cho bạn một fiddle với ví dụ.

1

Làm việc cho tôi - xem mục này - http://jsfiddle.net/tlarson/sBMTn/5. Nó có thể hữu ích nếu bạn có thể chỉ cho chúng ta một câu đố nơi mà vấn đề tồn tại để chúng ta có thể thấy những gì đang xảy ra.

Đây là mã tôi đã thêm:

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

Và tôi cập nhật đánh dấu của bạn để tận dụng các 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> 

Lưu ý rằng cuộc gọi của bạn với phương pháp each jQuery chỉ có thể hoạt động trên dữ liệu đã có trong DOM. Vì vậy, hãy chắc chắn để đặt nó sau khi bạn gọi ko.applyBindings

Tuy nhiên ...

Bạn có thể muốn xem xét sử dụng một tính toán hơn là sử dụng jQuery cho phần của ngày Do trong X 'của trang. Đây là cách bạn có thể làm điều đó: http://jsfiddle.net/tlarson/sBMTn/1

Các vấn đề liên quan