VueJs creating a directive for date format

Question

So I'm new to VueJs and I'm trying to create a global directive to format date using moment.js. My problem is that the directive is not getting triggered. Idk if I'm calling it right or not.

dateFormat.js

import Vue from "vue";
import moment from "moment";

Vue.directive("formatdate", function(value) {
 if (value) {
 return moment(String(value)).format("MM/DD/YYYY hh:mm");
 }
});

itemList.vue

<span v-formatdate>{{ item.date_added }}</span>

tony19 · Accepted Answer · 2022-07-15 21:14:48Z

5

It looks like you need filters instead of directives:

Vue.filter("formatdate", // function definition here)

And in your template, use it as:

<span>{{ item.date_added | formatdate }}</span>

edited Jul 15, 2022 at 21:14

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 18, 2019 at 1:03

akuiper

216k33 gold badges362 silver badges379 bronze badges

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

Collectives™ on Stack Overflow

VueJs creating a directive for date format

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related