Date filter for Vue 2.X based on the date-fns.
npm install vue-date-fns

The format function from date-fns available as a filter for Vue apps. Why date-fns and not moment.js? There are already few articles, covering, that.
This package is just a Vue 2.X wrapper around date-fns. All important (and excellent) stuff is happening inside the date-fns library. If you found a bug please report it in their issue tracker or help them and contribute the PR. If you like their package, support them, because they're doing an amazing job.
``sh`
npm install vue-date-fns --save
or
`sh`
yarn add vue-date-fns
vue-date-fns depends on date-fns version 2. If you are using the version 1 of date-fns, then install vue-date-fns@1, which is compatible.
vue-date-fns@2 inherits all breaking changes from date-fns@2, because it's just a wrapper around their format function. There were major breaking changes in the format API, e.g. DD MMMM YYYY should be from now on dd MMMM yyyy.
Before upgrading to date-fns@2 and vue-date-fns@2, please check date-fns docs for format function, their blog explaining changes in the format and their changelog for common breaking changes in the date-fns library. It is very likely that your existing code will break.
You can use filter directly in your component.
`js
// my-component.js
import { dateFilter } from "vue-date-fns";
export default {
filters: {
date: dateFilter
}
}
`
`html`
Now: {{ new Date() | date }}
You can register the filter globally in your app.
`js
// main.js
import { dateFilter } from "vue-date-fns";
Vue.filter("date", dateFilter);
`
`html`
Now: {{ new Date() | date }}
You can also use the filter as a mixin if you install the entire plugin.
`js
// main.js
import VueDateFns from "vue-date-fns";
Vue.use(VueDateFns);
`
`js`
// my-component.js
export default {
computed: {
now() {
return this.$date(new Date());
}
}
}
`html`
Now: {{ now }}
Now: {{ new Date() | date }}
Now: {{ $date(new Date()) }}
The filter and mixin support the same arguments as the original format function (see docs):
format(date, format, [options])
So you can do this:
`html`
Now: {{ new Date() | date('dd MMMM yyyy') }}
Now: {{ $date(new Date(), 'dd MMMM yyyy') }}
or provide custom locale:
`js
// my-component.js
import locale from "date-fns/locale/sk";
export default {
computed: {
now() {
return this.$date(new Date(), "dd MMMM yyyy", { locale });
}
}
}
`
The default date format and default locale options are the same as for the original format function (see the docs). There is a way how to set your own:
Instead of importing the dateFilter, import createDateFilter factory function and use it for creating the dateFilter with your own defaults:
`js
// my-component.js
import { createDateFilter } from "vue-date-fns";
import locale from "date-fns/locale/sk";
export default {
filters: {
date: createDateFilter("dd MMMM yyyy", { locale })
}
}
`
Instead of importing the dateFilter, import createDateFilter factory function and use it for creating the dateFilter with your own defaults:
`js
// main.js
import { createDateFilter } from "vue-date-fns";
import locale from "date-fns/locale/sk";
Vue.filter("date", createDateFilter("dd MMMM yyyy", { locale }));
`
Pass the new defaults as other parameters to the .use() call. The defaults are applied for global filter and mixin.
`js
// main.js
import VueDateFns from "vue-date-fns";
Vue.use(VueDateFns, "dd MMMM yyyy", { locale });
`
If you want to change the global name of the filter and mixin, pass the fourth argument into the .use() call. If the value is falsy, it defaults to "date".
`js
// main.js
import VueDateFns from "vue-date-fns";
Vue.use(VueDateFns, / custom format /, / custom options /, "myDateFilter");
`
`html`
Now: {{ new Date() | myDateFilter }}
Now: {{ new Date() | myDateFilter('dd MMMM yyyy') }}
Now: {{ $myDateFilter(new Date(), 'dd MMMM yyyy') }}
If you don't set up any default format for your custom filters, vue-date-fns will automatically set it to yyyy-MM-dd'T'HH:mm:ss.SSSxxx, following the migration guide of date-fns`.
If you would like to change the default format, follow the Overriding default options section and create a custom filter with custom defaults.