vue中时间格式化moment在组件和函数中的使用以及解决Invalid date问题

木爻木Y

于 2021-08-25 10:19:12 发布

阅读量3.4k

点赞数

分类专栏： Vue elementUI 文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_39111164/article/details/119905048

版权

Vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

elementUI

4 篇文章

订阅专栏

本文介绍了如何在Vue项目中安装和使用Moment.js库进行日期格式化。首先，通过npm安装Moment，然后在main.js文件中引入并创建一个自定义过滤器'dateformat'。接着，在组件中和函数中展示如何应用这个过滤器来格式化日期。如果遇到Invalid Date错误，只需确保将日期转换为Number类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、先使用npm命令安装moment

npm install moment --save

2、在main.js文件里引用moment

import moment from 'moment'

Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return moment(dataStr).format(pattern)
})

3、使用
（1）在组件中使用

<div class="time">{{time | dateformat}}</div>

（2）在函数中使用

const moment = require('moment')
this.lastTimemoment(Number(this.lastModifyTime)).format('MM DD,YYYY HH:mm:ss')

note:
如果出来Invalid date，则是采用字符串进行时间格式化，通过Number()转化即可