@vuejs-community/vue-filter-date-format

Simple datetime filter for Vue.js

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@vuejs-community/vue-filter-date-format
11211.6.32 years ago2 years agoMinified + gzip package size for @vuejs-community/vue-filter-date-format in KB

Readme

@vuejs-community/vue-filter-date-format
Simple datetime filter for Vue.js

Installation

install from npm
$ npm install @vuejs-community/vue-filter-date-format
and register in you Vue app
import Vue from 'vue';
import VueFilterDateFormat from '@vuejs-community/vue-filter-date-format';

Vue.use(VueFilterDateFormat);
or register in you Vue app with config
import Vue from 'vue';
import VueFilterDateFormat from '@vuejs-community/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'
  ],
  // Timezone offset, in minutes (0 - UTC, 180 - Russia, undefined - current)
  timezone: 0
});

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'
          ],
          // Timezone offset, in minutes (0 - UTC, 180 - Russia, undefined - current)
          timezone: 0
        }
      };
    }
  };
</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 | | Millisecond | S | 0 1 ... 58 59 | | | SSS | 000 001 ... 058 059 | | Day of Week | dddd | Sunday Monday ... Friday Saturday | | | dd | Su Mo ... Fr Sa | | | d | 0 1 ... 5 6
Default format is YYYY.MM.DD HH:mm:ss

License

MIT © Vue.js Community