Formatting Date in Knockout Template

Question

Sto per formattare una data nel modello di knockout. La data è in corso restituito come

2013-07-04T00:00:00 

vorrei che per essere visualizzato come

07/04/2013 

Qui è il legame che sto utilizzando

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

Sono le loro proprietà di formattazione di default nel modello di Knockout?

Answer 1

In Knockout non esiste nulla per quanto riguarda la formattazione della data o la formattazione in generale. L'associazione text converte semplicemente il valore della proprietà in stringa, quindi se si desidera la formattazione personalizzata è necessario farlo da soli.

L'utilizzo delle date non è così semplice in JavaScript, quindi è meglio usare una libreria di terze parti come moment.js per questo. È molto semplice da utilizzare e può formattare le date con lo format method. È disponibile il formato 'L' per il numero del mese richiesto, il giorno del mese, la formattazione dell'anno.

È possibile utilizzare js momento nella vista-modello o direttamente nel vostro legame come:

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

Oppure si può creare un gestore personalizzato vincolante che incapsula questa logica formattazione.

Nota: assicurarsi di utilizzare () sulla proprietà FirstDate se è un ko.observable all'interno dell'espressione di associazione dati per ottenere il relativo valore.

Answer 2

Uso moment.js in una versione modificata di Stephen Redd's date extender. Sembra questo, che è un po 'più pulito di una funzione in un binding di dati.

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

Answer 3

È inoltre possibile utilizzare MomentJs per creare un estensore:

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/