Skip to content
Date filter for Vue based on the date-fns.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.editorconfig
.eslintrc.js Initial implementation and tests Oct 23, 2018
.gitignore
LICENSE
README.md
package-lock.json
package.json

README.md

Date filter for Vue based on date-fns

npm version minzipped size

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 });
You can’t perform that action at this time.