Skip to content
Simple date formatting filter for Vue.js
TypeScript JavaScript
Branch: master
Clone or download
dependabot-preview and eduardnikolenko Bump rollup from 1.20.0 to 1.20.1 (#48)
Bumps [rollup](https://github.com/rollup/rollup) from 1.20.0 to 1.20.1.
- [Release notes](https://github.com/rollup/rollup/releases)
- [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md)
- [Commits](rollup/rollup@v1.20.0...v1.20.1)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>
Latest commit 0a632fa Aug 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Delete main.workflow Aug 22, 2019
src Fix config May 5, 2019
.editorconfig Use TypeScript Nov 4, 2018
.gitattributes Use TypeScript Nov 4, 2018
.gitignore Use TypeScript Nov 4, 2018
LICENSE Init Feb 21, 2018
README.md Add Dependabot Badge Jun 4, 2019
ava.config.js Setup tests Jan 10, 2019
ava.setup.js Setup tests Jan 10, 2019
package-lock.json Bump rollup from 1.20.0 to 1.20.1 (#48) Aug 23, 2019
package.json Bump ava from 1.4.1 to 2.0.0 (#18) Jun 3, 2019
rollup.config.js Setup tests Jan 10, 2019
tsconfig.json
tslint.json Disable linting json files Nov 4, 2018
wallaby.config.js Setup tests Jan 10, 2019

README.md

vue-filter-date-format

Simple datetime filter for Vue.js

NPM Version License Downloads Dependabot Status

Installation

install from npm

$ npm install vue-filter-date-format

and register in you Vue app

import Vue from 'vue';
import VueFilterDateFormat from 'vue-filter-date-format';

Vue.use(VueFilterDateFormat);

or register in you Vue app with config

import Vue from 'vue';
import VueFilterDateFormat from 'vue-filter-date-format';

Vue.use(VueFilterDateFormat, {
  monthNames: [
    'January', 'February', 'March', 'April', 'May', 'June',
    'July', 'August', 'September', 'October', 'November', 'December'
  ],
  monthNamesShort: [
    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
  ]
});

Usage

basic usage

<template>
  <div>{{ new Date() | dateFormat('YYYY.MM.DD') }}</div>
</template>

usage with config

<template>
  <div>{{ new Date() | dateFormat('YYYY.MM.DD', dateFormatConfig) }}</div>
</template>

<script>
  export default {
    data () {
      return {
        dateFormatConfig: {
          monthNames: [
            'January', 'February', 'March', 'April', 'May', 'June',
            'July', 'August', 'September', 'October', 'November', 'December'
          ],
          monthNamesShort: [
            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
          ]
        }
      };
    }
  };
</script>

usage with dateParse filter:

<template>
  <div>{{ '10.10.1989' | dateParse('DD.MM.YYYY') | dateFormat('YYYY.MM.DD') }}</div>
</template>

Format Options

Key Output
Year YYYY 1970 1971 ... 2029 2030
YY 70 71 ... 29 30
Month MMMM January February ... November December
MMM Jan Feb ... Nov Dec
MM 01 02 ... 11 12
M 1 2 ... 11 12
Day DD 01 02 ... 30 31
D 1 2 ... 30 31
Hour HH 00 01 ... 22 23
H 0 1 ... 22 23
hh 01 02 ... 11 12
h 1 2 ... 11 12
AM/PM A AM PM
a am pm
Minute mm 00 01 ... 58 59
m 0 1 ... 58 59
Second ss 00 01 ... 58 59
s 0 1 ... 58 59

Default format is YYYY.MM.DD HH:mm:ss

License

MIT © Eduard Nikolenko

You can’t perform that action at this time.