it-swarm.com.de

Formatierungsdatum in Knockout-Vorlage

Ich möchte ein Datum in der Vorlage von Knockout formatieren. Das Datum wird aktuell als zurückgegeben

2013-07-04T00:00:00

Ich möchte, dass es so angezeigt wird

07/04/2013

Hier ist die Bindung, die ich verwende

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

Sind ihre Standardformatierungseigenschaften in der Vorlage von Knockout enthalten?

12
rross

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

Das Arbeiten mit Datumsangaben ist in JavaScript nicht so einfach. Daher ist es wahrscheinlich besser, eine Drittanbieter-Bibliothek wie moment.js zu verwenden. Es ist sehr einfach zu benutzen und kann Ihre Daten mit der format Methode formatieren. Es gibt ein eingebautes Format 'L' für Ihre erforderliche Monatszahl, Tag des Monats, Jahr-Formatierung.

Sie können moment js in Ihrem Ansichtsmodell oder direkt in Ihrer Bindung wie folgt verwenden:

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

Sie können auch einen benutzerdefinierten Bindungshandler erstellen, der diese Formatierungslogik kapselt.

Hinweis: Verwenden Sie unbedingt () für Ihre Eigenschaft FirstDate, wenn es sich um einen ko.observable in Ihrem Datenbindungsausdruck handelt, um dessen Wert zu ermitteln.

28
nemesv

Ich benutze moment.js in einer modifizierten Version von Stephen Redds Date Extender . Es sieht so aus, das ist ein bisschen sauberer als das Aufrufen einer Funktion in einer Datenbindung.

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

Sie können MomentJs auch verwenden, um 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
    });
}

ansichtsmodell:

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

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

0
Mason240