Knockout.js形式の日付項目

Question

私の見解では、日付を含むknockout.jsバインドフィールドを表示したいと考えています。これは単なる表示フィールドであり、入力フィールドではありません。以下のようなものは次のようしかし、これが表示されているbasemodel.actionDate = ko.observable()

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

：

2013-06-17T11:56:18.4537687Z 

このdd mm yyyyをフォーマットする最も簡単な方法は何ですか。例：17 June 2013？

Answer 1

moment.js日付書式設定ライブラリをお勧めします。

それを使用して、あなたはあなたのビューでこのような何かを行うことができます。

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

Answer 2

どちらかあなたはそれをクライアント側をTODOしたいなら、あなたは、DateオブジェクトにISO日付文字列を解析して、jQueryのにグローバル化を使用することができ、クライアント側に正しい形式、またはフォーマットで

をそのサービス出力を確認してくださいフォーマットしてください。

は、私はそれが私がさらす行うことができ、生の日付の値 を取得するために、どのように私のブログ上の質問を得た

この

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

更新のためにKOエクステンダーを使用します計算された値の生の値

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

Answer 3

私はエクステンダーを使用しようとしてマッピング・プラグインで（と思う）いくつかの問題がありました。私は唯一の日付を表示し、それらを許可しないよので、私はちょうどこのような結合ハンドラを使用することを好む編集する：

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

私がプロトタイプを追加することにしました。ここでは

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

をハンドラですこのようなDateオブジェクト（ハンドラで作成されたDateオブジェクトのtoShortDateString） - しかし、上記のロジックをGlobalizeなどで置き換えることができます。

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

Answer 4

あなたがmoment.jsを参照している場合は、実際にはノックアウトモデルでフォーマットします。

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

Answer 5

宣言フォーマット機能：

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

として日付文字列でそれを使用します。

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