vue1.js 过滤器_Vue.js的简单日期时间过滤器-优快云博客

vue1.js 过滤器

Vue过滤器日期格式 (vue-filter-date-format)

Simple datetime filter for Vue.js.

Vue.js的简单日期时间过滤器。

安装 (Installation)

install from npm

从npm安装

$ npm install vue-filter-date-format

and register in you Vue app

并在您的Vue应用中注册

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

Vue.use(VueFilterDateFormat);

or register in you Vue app with config

或使用配置在您的Vue应用程序中注册

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:

使用dateParse过滤器：

<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
Day of Week	`dddd`	Sunday Monday ... Friday Saturday
	`dd`	Su Mo ... Fr Sa
	`d`	0 1 ... 5 6

	键	输出量
年	`YYYY`	1970 1971 ... 2029 2030
	`YY`	70 71 ... 29 30
月	`MMMM`	1月2月... 12月11日
	`MMM`	一月二月...十一月十二月
	`MM`	01 02 ... 11 12
	`M`	1 2 ... 11 12
天	`DD`	01 02 ... 30 31
	`D`	1 2 ... 30 31
小时	`HH`	00 01 ... 22 23
	`H`	0 1 ... 22 23
	`hh`	01 02 ... 11 12
	`h`	1 2 ... 11 12
上午下午	`A`	上午下午
	`a`	上午下午
分钟	`mm`	00 01 ... 58 59
	`m`	0 1 ... 58 59
第二	`ss`	00 01 ... 58 59
	`s`	0 1 ... 58 59
星期几	`dddd`	星期日星期一...星期五星期六
	`dd`	苏沫...神父
	`d`	0 1 ... 5 6