VueJSでの（おそらくヌル/空の）日付のフォーマット方法

Vue.JS 1.0を使用すると、空のJSON日付を適切にフォーマットする簡単な方法を見つけることができませんでした。VueJSでの（おそらくヌル/空の）日付のフォーマット方法

私はvue-filter npm packagedate filterで試しましたが、日付が空の場合は失敗します。たとえば、私のデータがある場合：

{ name: "John", birthday: null }, /* unknown birthday */ 
{ name: "Maria", birthday: "2012-04-23T18:25:43.511Z" },

戻り

John 12/31/1969 9:00:00 PM <-- null date should be blank 
Maria 4/23/2012 3:25:43 PM <-- ok

私が使用していますコード：日付をフォーマットするための適切な方法がある

<!DOCTYPE html><html> 
<head> 
    <script src="lib/vue/dist/vue.min.js"></script> 
    <script src="lib/vue-filter/dist/vue-filter.min.js"></script> 
</head> 
<body> 
<div id="app"> 
    <h1>Without Filter:</h1> 
    <div v-for="person in list"> 
     <div>{{person.name}} {{person.birthday}}</div> 
    </div> 
    <h1>With Filter:</h1> 
    <div v-for="person in list"> 
     <div>{{person.name}} {{person.birthday | date }}</div> 
    </div> 
</div> 
<script> 
    new Vue({ 
     el: "#app", 
     data: { 
      list: [ 
       { name: "John", birthday: null }, 
       { name: "Maria", birthday: "2012-04-23T18:25:43.511Z" }, 
      ] 
     } 
    }); 
</script> 
</body> 
</html>

何もショーを行いますことdateがnullの場合は空白？

出典

2016-09-01 Gerardo Grignoli

日付フィルタをラップするカスタムフィルタを作成します。入力がnullの場合、nullを返し、それ以外の場合はうまく動作しませんVue.filter('date')(input)

Vue.filter('dateOrNull', function(d, ...others) { 
 
    return d ? Vue.filter('date')(d, ...others) : null; 
 
}); 
 
new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    list: [{ 
 
     name: "John", 
 
     birthday: null 
 
    }, { 
 
     name: "Maria", 
 
     birthday: "2012-04-23T18:25:43.511Z" 
 
    }, ] 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script> 
 
<script src="//rawgit.com/wy-ei/vue-filter/master/dist/vue-filter.min.js"></script> 
 
<div id="app"> 
 
    <h1>Without Filter:</h1> 
 
    <div v-for="person in list"> 
 
    <div>{{person.name}} {{person.birthday}}</div> 
 
    </div> 
 
    <h1>With Filter:</h1> 
 
    <div v-for="person in list"> 
 
    <div>{{person.name}} {{person.birthday | dateOrNull '%B'}}</div> 
 
    </div> 
 
</div>

出典

2016-09-01 19:17:59

dateOrNullから日付にパラメータを渡す方法を知っていますか？ '{{person.birthday | dateOrNull '％B'}} ' –

現代JSにはスプレッド演算子があります。更新例を参照してください。古いJSは 'Vue.filter（ 'date'）を実行します。apply（null、arguments）' –

私は後でもっと多くのブラウザをサポートすることを好みます。ありがとう！ –

戻る：

ロイは私が尋ねたまさに答えます。しかし、それはvue-filterは、私ののために良くないことが判明した。ブラウザのロケール形式で日付を表示するには、'%c'が必要でした（悪い考えです）。 vue-filterソースは、実際には次をしていた：（依存することを避けるため、スタンドアロンフィルタとして書き換え中）：

Vue.filter('date', function (d) { 
    var date = new Date(d); 
    return d ? date.toLocaleDateString() + ' ' + date.toLocaleTimeString().trim() : null; 
});

それはひどいです：各ブラウザの動作が異なります。そして、未知のタイムゾーンと日付はUTCを前提とし、GMT-3で生活するとき、これを引き起こしてローカルタイムゾーンに移動されます：

新計画：カスタムフィルタと

使用Moment.js：

Vue.filter('moment', function (date) { 
    var d = moment(date); 
    if (!d.isValid(date)) return null; 
    return d.format.apply(d, [].slice.call(arguments, 1)); 
});

<script src='moment.js'>を忘れないでください。

使用法：{{ date | moment "dddd, MMMM Do YYYY" }}

も参照してください：Moment Date and Time Format Strings

私もvue-moment NPMパッケージを試してみましたが、それはCommonJS/require()構文に依存し、私はちょうどこのためのWebPACK/browserifyを使用したくありません、

出典

2016-09-03 08:03:47

VueJSでの（おそらくヌル/空の）日付のフォーマット方法

答えて

関連する問題