Wie formatiere ich ein (möglicherweise Null/leer) Datum in VueJS

Mit Vue.JS 1.0 konnte ich keine einfache Möglichkeit finden, ein JSON-Datum richtig zu formatieren, das leer sein kann.Wie formatiere ich ein (möglicherweise Null/leer) Datum in VueJS

Ich versuchte mit vue-filter npm packagedate filter aber es schlägt fehl, wenn das Datum leer ist. Zum Beispiel, wenn meine Daten:

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

kehrt

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

Der Code ich verwende:

<!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>

Was den richtigen Weg ist, ein Datum zu formatieren, das wird auch zeigen, machen leer, wenn das Datum null ist?

Quelle

2016-09-01 Gerardo Grignoli

Schreiben Sie einen benutzerdefinierten Filter, um den Datumsfilter zu umbrechen. Ist der Eingang Null ist, null zurück, andernfalls Rückkehr 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>

Quelle

2016-09-01 19:17:59

Wissen Sie, wie Parameter von DateOrNull bis Date übergeben werden? Wie in '{{person.birthday | dateOrNull '% B'}} ' –

Modern JS hat den Spread-Operator. Siehe aktuelles Beispiel. Ältere JS würde 'Vue.filter ('date'). Apply (null, Argumente)' –

Ich bevorzuge die später, um mehr Browser zu unterstützen. Vielen Dank! –

Es ist nicht gut funktioniert:

Roy Antworten genau das, was, fragte ich. Aber es stellte sich heraus, dass vue-filter war nicht gut für meine Bedürfnisse. Ich brauchte '%c', um das Datum im Locale-Format des Browsers anzuzeigen (schlechte Idee). vue-filter Quelle wurde tatsächlich tun, die folgenden: (rewrited als Stand-alone-Filter, um die Abhängigkeit zu vermeiden):

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

Es ist schrecklich: jeder Browser anders funktioniert. Und Daten mit unbekannter Zeitzone angenommen UTC und bewegten zu lokaler Zeitzone dies verursachen, wenn bei GMT-3 leben:

Neuer Plan:

Verwenden Moment.js mit einem benutzerdefinierten Filter:

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

Nicht vergessen <script src='moment.js'>.

Verbrauch: {{ date | moment "dddd, MMMM Do YYYY" }}

Siehe auch: Moment Date and Time Format Strings

Ich habe auch versucht vue-moment npm Paket aber es hängt von CommonJS/require() Syntax, und ich will nicht webpack/browserify verwenden, nur für diese ,

Quelle

2016-09-03 08:03:47

Wie formatiere ich ein (möglicherweise Null/leer) Datum in VueJS

Antwort

Verwandte Themen