Format daty Knockout.js

Question

Moim zdaniem chcę wyświetlić pole bindowane knockout.js zawierające datę. To tylko pole wyświetlania, a nie pole wejściowe. Coś jak poniżej, gdy basemodel.actionDate = ko.observable()

<p class="display-field" data-bind="text: baseModel.actionDate"/> 

Jednak ten jest wyświetlany w następujący sposób:

2013-06-17T11:56:18.4537687Z 

Jaki jest najprostszy sposób, aby sformatować ten dd mm yyyy. np .: 17 June 2013?

Answer 1

Polecam moment.js bibliotekę formatowania daty.

Używając go, można zrobić coś takiego w widoku:

<p class="display-field" data-bind="text: moment(baseModel.actionDate()).format('LL')"/> 

Answer 2

Albo upewnij się, że wyjście usługa je w odpowiednim formacie, lub wzoru stronie klienta

Jeśli chcesz todo to po stronie klienta to można analizować datę ciąg ISO do obiektu Date, a następnie użyć jQuery globalizacji na sformatuj go do żądanego formatu.

używam przedłużacze KO tego

http://jsfiddle.net/vRf5B/42/

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

      format = typeof format === "string" ? format: undefined; 
      value = Globalize.format(value, format); 

      return value;   
     }, 
     write: target 
    }); 
} 

aktualizacji

Mam pytanie na moim blogu, jak pobrać surowego wartość daty można to zrobić mój narażając wartość nieprzetworzona obliczona tak jak

http://jsfiddle.net/vRf5B/91/

Answer 3

miałem pewne problemy (chyba) z wtyczką odwzorowania próbuje używać przedłużacza. Odkąd jestem wyświetlając tylko daty ich nie pozwalając, aby być edytowane Wolę po prostu użyć wiążącej obsługi takiego:

Shipped on <span data-bind="date: shipDt"></span> 

Oto obsługi:

ko.bindingHandlers.date = 
    { 
     update: function (element, valueAccessor:() => any, allBindingsAccessor: any) 
     { 
      return ko.bindingHandlers.text.update(element, function() 
      { 
       var value: any = ko.utils.unwrapObservable(valueAccessor()); 

       if (value == null) 
       { 
        return null; 
       } 

       if (typeof value === "string") 
       { 
        value = new Date(value); 
       } 

       return value.toShortDateString(); 

      }, allBindingsAccessor, null, null); 
     } 
    }; 

Wybrałem dodać prototyp Obiekt daty taki jak ten (i wywołanie toShortDateString na obiekcie Date utworzonym w module obsługi) - ale można zastąpić powyższą logikę przez Globalize lub cokolwiek innego.

Date.prototype.toShortDateString = function() 
{ 
    return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear(); 
}; 

Answer 4

Jeśli odwołujesz się do pliku moment.js, to faktycznie formatowałbym w modelu nokautu.

var BiographicViewModel = function (person) { 
    this.FirstName = ko.observable(person.first_name); 
    this.LastName = ko.observable(person.last_name); 
    this.DOB = ko.observable(moment(person.birth_date).format("MM/DD/YYYY")); 
    this.Gender = ko.observable(person.gender); 
    this.Country = ko.observable(person.country); 
    this.City = ko.observable(person.city);   
}; 

Answer 5

funkcja Format Declare:

Date.prototype.toFormattedDate = function() { 
    var dd = this.getDate(); 
    if (dd < 10) dd = '0' + dd; 
    var mm = this.getMonth() + 1; 
    if (mm < 10) mm = '0' + mm; 
    var yyyy = this.getFullYear(); 
    /* change format here */ 
    return String(mm + "/" + dd + "/" + yyyy); 
}; 

i używać go z datą strun jak:

<span data-bind="text: new Date(TaxAuthority.RegDate).toFormattedDate()"></span>