Formatierungsdatum in Knockout-Vorlage

Question

Ich möchte ein Datum in Knockout-Vorlage formatieren. Das Datum wird derzeit wieder als

2013-07-04T00:00:00 

Ich mag wäre es wie

07/04/2013 

hier angezeigt werden soll, wird die Bindung Ich bin mit

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

ihre Standard sind Formatierungseigenschaften in Knockouts Vorlage?

Answer 1

Es ist nichts in Bezug auf Datumsformatierung oder Formatierung im Allgemeinen in Knockout eingebaut. Die text Bindung konvertiert nur den Eigenschaftswert in einen String. Wenn Sie eine benutzerdefinierte Formatierung wünschen, müssen Sie dies selbst tun.

Das Arbeiten mit Datumsangaben ist in JavaScript nicht so einfach, also sind Sie wahrscheinlich besser mit einer Drittanbieter-Bibliothek wie moment.js dafür. Es ist sehr einfach zu bedienen und es kann Ihre Daten mit der format method formatieren. Es ist im Format 'L' für Ihre erforderliche Monatszahl, Tag des Monats, Jahresformatierung eingebaut.

Sie können Moment js in Ihrem View-Modell verwenden oder direkt in Ihre Bindung wie:

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

Oder Sie können eine benutzerdefinierte Bindung Handler erstellen, die diese Formatierung Logik kapselt.

Hinweis: Stellen Sie sicher, dass () auf Ihrer FirstDate Eigenschaft verwendet wird, wenn es ein ko.observable in Ihrem Datenbindungsausdruck ist, um seinen Wert zu erhalten.

Answer 2

Ich verwende moment.js in einer modifizierten Version von Stephen Redd's date extender. Es sieht so aus, das ist ein wenig sauberer als eine Funktion in einer Datenbindung aufrufen.

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

Answer 3

Sie können auch MomentJs verwenden einen Extender zu erstellen:

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/