How to format a (possibly null/empty) date in VueJS

Question

Using Vue.JS 1.0, I couldn't find a simple way to properly format a JSON date that can be empty.

I tried with vue-filter npm package date filter but it fails if the date is empty. For example if my data is:

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

returns

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

The code i am using:

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

What is the proper way to format a date, that will also make show blank if date is null?

Roy J · Accepted Answer · 2016-09-01 20:33:20Z

2

Write a custom filter to wrap the date filter. If the input is null, return null, otherwise return 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>

edited Sep 1, 2016 at 20:33

answered Sep 1, 2016 at 19:17

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gerardo Grignoli Over a year ago

Do you know how to pass through parameters from dateOrNull to date? As in {{person.birthday | dateOrNull '%B' }}

Roy J Over a year ago

Modern JS has the spread operator. See updated example. Older JS would do Vue.filter('date').apply(null, arguments)

Gerardo Grignoli Over a year ago

I prefer the later in order to support more browsers. Thanks!

Gerardo Grignoli · Accepted Answer · 2016-09-03 08:03:47Z

It doesn't work well:

Roy answers exactly what I asked. But it turned out that vue-filter was not good for my needs. I needed '%c' to show date in browser's locale format (bad idea). vue-filter source was actually doing the following: (rewrited as a stand alone filter, to avoid the dependency):

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

It is terrible: each browser works differently. And dates with unknown timezone are assumed UTC and moved to local timezone causing this when living at GMT-3:

New plan:

Use Moment.js with a custom 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));
});

Don't forget <script src='moment.js'>.

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

See also: Moment Date and Time Format Strings

I also tried vue-moment npm package BUT it depends on CommonJS / require() syntax, and I don't want to use webpack/browserify just for this,

Collectives™ on Stack Overflow

How to format a (possibly null/empty) date in VueJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related