Ngày Định dạng trong Mẫu Knockout

Question

Tôi muốn định dạng ngày trong mẫu loại trực tiếp. Ngày hiện đang được quay trở lại như

2013-07-04T00:00:00 

Tôi muốn nó sẽ được hiển thị như

07/04/2013 

Dưới đây là các ràng buộc Tôi đang sử dụng

<td data-bind="text: FirstDate"> 

Are thuộc tính mặc định định dạng của họ trong mẫu của Knockout?

Answer 1

Không có gì được xây dựng liên quan đến định dạng ngày hoặc định dạng nói chung trong Knockout. Liên kết text chỉ chuyển đổi giá trị thuộc tính thành chuỗi, vì vậy nếu bạn muốn định dạng tùy chỉnh, bạn cần tự mình thực hiện.

Làm việc với các ngày không phải là quá dễ dàng trong JavaScript, do đó bạn có thể tốt hơn khi sử dụng thư viện của bên thứ ba như moment.js cho việc này. Nó rất đơn giản để sử dụng và nó có thể định dạng ngày của bạn với format method. Có định dạng được xây dựng theo định dạng 'L' cho định dạng tháng, số tháng, năm theo yêu cầu của bạn.

Bạn có thể sử dụng js khoảnh khắc trong xem mô hình của bạn hoặc trực tiếp trong ràng buộc của bạn như:

<td data-bind="text: moment(FirstDate).format('L')"> 

Hoặc bạn có thể tạo một handler tùy chỉnh ràng buộc mà gói gọn Logic định dạng này.

Lưu ý: Đảm bảo sử dụng () trên thuộc tính FirstDate của bạn nếu thuộc tính là ko.observable bên trong biểu thức ràng buộc dữ liệu để nhận giá trị của nó.

Answer 2

Tôi sử dụng moment.js trong phiên bản sửa đổi Stephen Redd's date extender. Dường như điều này, đó là một chút sạch hơn so với gọi một chức năng trong một ràng buộc dữ liệu.

<input type="text" data-bind="value: dateOfBirth.formattedDate" /> 

Answer 3

Bạn cũng có thể sử dụng MomentJs để tạo ra một bộ mở rộng:

ko.extenders.date = function (target, format) { 
    return ko.computed({ 
     read: function() { 
      var value = target(); 
      if (typeof value === "string") { 
       value = new Date(value); 
      } 

      return moment(value).format("LL"); 
     }, 
     write: target 
    }); 
} 

viewmodel:

self.YourDate = ko.observable().extend({ date: true }); 

http://momentjs.com/docs/#/displaying/format/