web-dev-qa-db-fra.com

Knockout.js format date item

De mon point de vue, je souhaite afficher un champ lié knockout.js contenant une date. C'est juste un champ d'affichage et non un champ de saisie. Quelque chose comme ci-dessous quand basemodel.actionDate = ko.observable()

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

Cependant, cela s’affiche comme suit:

2013-06-17T11:56:18.4537687Z

Quel est le moyen le plus simple de formater ce dd mm yyyy. Exemple: 17 June 2013?

html5datetimeknockout.js
32
Martin

Je recommande la bibliothèque de formatage moment.js date.

En l'utilisant, vous pouvez faire quelque chose comme ceci à votre avis:

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

Soit vous assurer que le service l’affiche dans un format correct, soit au format côté client.

Si vous souhaitez utiliser le côté client, vous pouvez analyser la chaîne de date ISO dans un objet Date, puis utiliser jQuery Globalize pour la formater au format souhaité.

J'utilise des rallonges KO pour cela

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

mettre à jour

J'ai une question sur mon blog sur la façon de récupérer la valeur de date brute. Il est possible d'exposer la valeur brute calculée de la manière suivante:

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

13
Anders

J'ai eu quelques problèmes (je pense) avec le plugin de mappage essayant d'utiliser l'extension. Comme je n’affiche que les dates et ne permet pas leur modification, je préfère utiliser un gestionnaire de liaisons comme celui-ci:

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

Voici le gestionnaire:

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

J'ai choisi d'ajouter un prototype à l'objet Date comme ceci (et d'appeler toShortDateString sur l'objet Date créé dans le gestionnaire) - mais vous pouvez remplacer la logique ci-dessus par Globalize ou ce que vous préférez.

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

Si vous faites référence à moment.js, alors je formaterais dans le modèle de masquage.

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

Déclarez la fonction de formatage:

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

Et utilisez-le avec les chaînes de date comme:

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