一、安装moment模块
用npm安装
npm install moment --save
用yarn安装
yarn add moment
二、使用moment
链接: https://momentjs.com/docs/.
使用ES6语法引入并使用moment
直接通过import引入moment
import moment from ‘moment’;
然后通过moment()这个方法传一个时间戳进来,format()用于格式化,括号内写要格式化为什么样式
moment().format();
以下是format()内可以输入的格式
年,月和日:
输入 | 例子 | 描述 |
---|---|---|
YYYY | 2021 | 4或2位数的年份。注意:strict模式下只能解析4位数字 |
YY | 21 | 2位数的年份 |
Y | -25 | 带任意数字和符号的年份 |
Q | 1…4 | 一年四分之一。将月份设置为季度的第一个月。 |
M 或 MM | 1…12或01…12 | 月数 |
MMM或MMMM | Jan…December | 区域设置中的月份名称由 moment.locale() |
D或 DD | 1…31或01…31 | 一个月中的某天 |
Do | 1st…31st | 每月第几天 |
DDD或DDDD | 1…365或001…365 | 一年中的一天 |
X(大写) | 1410715640.579 | 秒级时间戳 |
x(小写) | 1410715640579 | 毫秒级时间戳 |
周年,周和周日:
输入 | 例子 | 描述 |
---|---|---|
gggg | 2014 | 区域设置4位数字的周年 |
gg | 14 | 区域设置2位数字的周年 |
w ww | 1…53 | 一年的语言环境周 |
e | 0…6 | 一周的语言环境 |
ddd dddd | Mon…Sunday | 区域设置中的日期名称 moment.locale() |
GGGG | 2014 | ISO 4位数周年 |
GG | 14 | ISO 2位数的星期年 |
W WW | 1…53 | 一年中的ISO周 |
E | 1…7 | ISO星期几 |
三、封装组件
用moment格式化时间一般在项目中会多次复用,因此直接封装成一个过滤器组件
import Vue from ‘vue’
import moment from ‘moment’
moment.locale(‘zh-cn’, {
weekdays: ‘周日_周一_周二_周三_周四_周五_周六’.split(’_’)
})
// 定义时间的过滤器
Vue.filter(‘timeFilter’, (time) => {
// 要注意time这个时间戳是毫秒级还是秒级,若是秒级需要乘以1000在传入moment()里
return moment(time * 1000).format(‘dddd M月DD日’)
})