1.3.1 • Published 4 years ago

vue-filter-date-format v1.3.1

Weekly downloads
1,522
License
MIT
Repository
github
Last release
4 years ago

vue-filter-date-format

Simple datetime filter for Vue.js

NPM Version License Downloads Dependabot Status Wallaby.js

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, {
  dayOfWeekNames: [
    'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
    'Friday', 'Saturday'
  ],
  dayOfWeekNamesShort: [
    'Su', 'Mo', 'Tu', 'We', 'Tr', 'Fr', 'Sa'
  ],
  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: {
          dayOfWeekNames: [
            'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
            'Friday', 'Saturday'
          ],
          dayOfWeekNamesShort: [
            'Su', 'Mo', 'Tu', 'We', 'Tr', 'Fr', 'Sa'
          ],
          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

KeyOutput
YearYYYY1970 1971 ... 2029 2030
YY70 71 ... 29 30
MonthMMMMJanuary February ... November December
MMMJan Feb ... Nov Dec
MM01 02 ... 11 12
M1 2 ... 11 12
DayDD01 02 ... 30 31
D1 2 ... 30 31
HourHH00 01 ... 22 23
H0 1 ... 22 23
hh01 02 ... 11 12
h1 2 ... 11 12
AM/PMAAM PM
aam pm
Minutemm00 01 ... 58 59
m0 1 ... 58 59
Secondss00 01 ... 58 59
s0 1 ... 58 59
Day of WeekddddSunday Monday ... Friday Saturday
ddSu Mo ... Fr Sa
d0 1 ... 5 6

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

License

MIT © Eduard Nikolenko

1.3.1

4 years ago

1.3.0

5 years ago

1.2.5

5 years ago

1.2.4

5 years ago

1.2.3

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.5

5 years ago

1.1.4

5 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago