Date filter for Vue 2.X based on 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.

Disclaimer

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.

Installation

``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.

$3

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.

Usage

$3

You can use filter directly in your component.

`js
// my-component.js
import { dateFilter } from "vue-date-fns";

export default {
filters: {
date: dateFilter
}
}
`

`html


`

$3

You can register the filter globally in your app.

`js
// main.js
import { dateFilter } from "vue-date-fns";

Vue.filter("date", dateFilter);
`

`html


`

$3

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


`

Options

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


`

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 });
}
}
}
`

Overriding default options

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:

$3

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 })
}
}
`

$3

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 }));
`

$3

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 });
`

Customize the global filter name

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


`

Default date format

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.