exastencil/vue-date-fns

Date filter for Vue based on the date-fns.

Date filter for Vue based on date-fns

The format function from date-fns available as a filter for Vue apps. Why date-fns and not moment? There are already few articles covering that.

Installation

npm install vue-date-fns --save

or

yarn add vue-date-fns

Usage

Filter in individual component

You can use filter directly in your component.

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

export default {
    filters: {
        date: dateFilter
    }
}

<!-- my-component.vue -->
<template>
    <div>Now: {{ new Date() | date }}</div>
</template>

Global filter

You can register the filter globally in your app.

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

Vue.filter("date", dateFilter);

<!-- my-component.vue -->
<template>
    <div>Now: {{ new Date() | date }}</div>
</template>

Global filter and mixin

You can also use the filter as a mixin if you install the entire plugin.

// main.js
import VueDateFns from "vue-date-fns";

Vue.use(VueDateFns);

// my-component.js
export default {
    computed: {
        now() {
            return this.$date(new Date());
        }
    }
}

<!-- my-component.vue -->
<template>
    <div>
        <div>Now: {{ now }}</div>
        <div>Now: {{ new Date() | date }}</div>
        <div>Now: {{ $date(new Date()) }}</div>
    </div>
</template>

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:

<!-- my-component.vue -->
<template>
    <div>
        <div>Now: {{ new Date() | date('DD MMMM YYYY') }}</div>
        <div>Now: {{ $date(new Date(), 'DD MMMM YYYY') }}</div>
    </div>
</template>

or provide custom locale:

// 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:

Filter in individual component

Instead of importing the dateFilter, import createDateFilter factory function and use it for creating the dateFilter with your own defaults:

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

Global filter

Instead of importing the dateFilter, import createDateFilter factory function and use it for creating the dateFilter with your own defaults:

// main.js
import { createDateFilter } from "vue-date-fns";
import locale from "date-fns/locale/sk";

Vue.filter("date", createDateFilter("DD MMMM YYYY", { locale }));

Global filter and mixin

Pass the new defaults as other parameters to the .use() call. The defaults are applied for global filter and mixin.

// main.js
import VueDateFns from "vue-date-fns";

Vue.use(VueDateFns, "DD MMMM YYYY", { locale });