vue添加时间格式化过滤器

发表于

来自：https://blog.csdn.net/genius_yym/article/details/77530602

函数封装

我这里将下面的函数保存到src/libs/filters/formatDate.js文件里

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 这个函数 网上  随处可见，我也是应用了别人的。
export function formatDate(date, fmt) {
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
    };
    for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
            let str = o[k] + '';
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
        }
    }
    return fmt;
};

function padLeftZero(str) {
    return ('00' + str).substr(str.length);
}

在组件里通过过滤器使用

  1. 引用：

    1
    import { formatDate } from '@/libs/filters/formatDate.js'

  2. 添加过滤器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    export default {
      name: 'userinfo',
      components: {
        avatar
      },
      // 过滤器
      filters: {
        formatDate(time) {
        var date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd');
       }
      }
    }

  3. 使用

    1
    2
    3
    ...
    <p class="userinfo time">{{$store.state.user.userCreatedAt | formatDate}}</p>
    ...

  4. 在js代码里当成普通函数使用

    1
    let nowDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm')