it-swarm.com.de

Knockout.js-Datumsformat

Aus meiner Sicht möchte ich ein knockout.js-gebundenes Feld anzeigen, das ein Datum enthält. Es ist nur ein Anzeigefeld und kein Eingabefeld. Etwas wie unten, wenn basemodel.actionDate = ko.observable()

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

Dies wird jedoch wie folgt angezeigt:

2013-06-17T11:56:18.4537687Z

Was ist der einfachste Weg, diesen dd mm yyyy zu formatieren? zB: 17 June 2013?

32
Martin

Ich empfehle die Formatierungsbibliothek moment.js datei.

Mit dieser Option können Sie in Ihrer Ansicht Folgendes tun:

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

Stellen Sie entweder sicher, dass der Dienst ihn in einem korrekten Format ausgibt, oder formatieren Sie ihn auf der Clientseite

Wenn Sie dies auf der Clientseite tun möchten, können Sie die ISO-Datumszeichenfolge in ein Date-Objekt analysieren und anschließend mit jQuery globalize das gewünschte Format erstellen.

Ich verwende dafür KO-Extender

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
    });
}

update

Ich habe in meinem Blog eine Frage, wie der Rohdatenwert abgerufen werden kann. Es kann gemacht werden, den Rohwert auf dem berechneten Wert anzuzeigen

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

13
Anders

Ich hatte einige Probleme (glaube ich) mit dem Mapping-Plugin, das versucht, den Extender zu verwenden. Da ich nur Datumsangaben zeige und deren Bearbeitung nicht zulasse, verwende ich lieber einen Bindungshandler wie diesen:

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

Hier ist der Handler:

    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);
        }
    };

Ich habe beschlossen, einen Prototyp zu einem Date-Objekt wie diesem hinzuzufügen (und toShortDateString für das im Handler erstellte Date-Objekt aufzurufen) - aber Sie können die obige Logik durch Globalize oder was auch immer Sie bevorzugen, ersetzen.

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

Wenn Sie sich auf moment.js beziehen, würde ich das Knockout-Modell tatsächlich formatieren.

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);        
};
0
JRB Developer

Formatfunktion deklarieren:

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);
};

Und verwenden Sie es mit den Datumszeichenfolgen als:

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