web-dev-qa-db-ja.com

ノックアウトテンプレートでの日付のフォーマット

ノックアウトのテンプレートで日付をフォーマットしたいと思います。日付は現在、として返されています

2013-07-04T00:00:00

次のように表示したいのですが

07/04/2013

これが私が使っているバインディングです

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

Knockoutのテンプレートのデフォルトのフォーマットプロパティはありますか？

javascriptknockout.jsknockout-2.0
13
rross

Knockoutには、日付の書式設定や一般的な書式設定に関して何も組み込まれていません。 textバインディングは、プロパティ値を文字列に変換するだけなので、カスタムフォーマットが必要な場合は自分で行う必要があります。

JavaScriptでは日付の操作はそれほど簡単ではないため、このために moment.js のようなサードパーティライブラリを使用する方がおそらく良いでしょう。使い方はとても簡単で、 format method で日付をフォーマットできます。必要な月の数字、日、年の形式には、'L'の形式が組み込まれています。

ビューモデルで、または次のようにバインディングで直接、momentjsを使用できます。

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

または、このフォーマットロジックをカプセル化するカスタムバインディングハンドラーを作成することもできます。

注：値を取得するためにデータバインディング式内で()である場合は、FirstDateプロパティでko.observableを使用してください。

28
nemesv

Stephen Reddの日付エクステンダー の修正バージョンでmoment.jsを使用します。これは次のようになります。これは、データバインドで関数を呼び出すよりも少しクリーンです。

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

MomentJを使用してエクステンダーを作成することもできます。

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/

0
Mason240