moment.js的入门使用总结

1.Vue项目中的使用

安装

yarn add moment

在main.js文件中引入

import moment from 'moment';
Vue.prototype.$moment = moment

使用

this.$moment()  // 输出当前时间的moment对象

2.几个常用的API

1.valueOf与unix

valueOf与unix都是输出时间戳，区别就是unix不输出毫秒数。

eg：

let date1 = this.$moment().valueOf()
let date2 = this.$moment().unix()
console.log('date1:',date1);
console.log('date2:',date2);

输出结果：

2.format

用于时间的格式化。 eg：

let date0 = this.$moment().format()
let date1 = this.$moment().format('YYYY-MM-DD')
let date2 = this.$moment().format('YYYY-MM-DD HH:mm:ss')
let date3 = this.$moment().format('YYYY-MM-DD HH:mm')
let date4 = this.$moment().format('MM-DD-YYYY')
console.log('date0:',date0);
console.log('date1:',date1);
console.log('date2:',date2);
console.log('date3:',date3);
console.log('date4:',date4);

输出结果：

3.startOf,endOf

startOf通过将原始的 moment 设置为时间单位的开头来对其进行更改。 endOf将其设置为时间单位的末尾，

moment().startOf('year'); // 设置为今年一月1日上午 12:00 
moment().startOf('month'); // 设置为本月1日上午 12:00 
moment().startOf('quarter'); // 设置为当前季度的开始，即每月的第一天上12:00
moment().startOf('week'); // 设置为本周的第一天上午 12:00 
moment().startOf('isoWeek'); // 根据 ISO 8601 设置为本周的第一天上午12:00 
moment().startOf('day'); // 设置为今天上午 12:00 
moment().startOf('date'); // 设置为今天上午 12:00 
moment().startOf('hour'); // 设置为当前时间，但是 0 分钟、0 秒钟、0 毫秒 
moment().startOf('minute'); // 设置为当前时间，但是 0 秒钟、0 毫秒 
moment().startOf('second'); // 设置为当前时间，但是 0 毫秒 

eg：

let date0 = this.$moment().format('YYYY-MM-DD HH:mm:ss')
let date1 = this.$moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')
let date2 = this.$moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
let date3 = this.$moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')

console.log('date0:',date0);
console.log('date1:',date1);
console.log('date2:',date2);
console.log('date3:',date3);

输出结果：

4.add,subtract

可以为现有的 moment 增加时间,减少时间

let date0 = this.$moment().format('YYYY-MM-DD HH:mm:ss')
let date1 = this.$moment().add(7,'days').format('YYYY-MM-DD HH:mm:ss')
let date2 = this.$moment().add(1,'months').format('YYYY-MM-DD HH:mm:ss')
let date3 = this.$moment().subtract(3,'days').format('YYYY-MM-DD HH:mm:ss')
let date4 = this.$moment().subtract(1,'months').format('YYYY-MM-DD HH:mm:ss')
console.log('date0:',date0);
console.log('date1:',date1);
console.log('date2:',date2);
console.log('date3:',date3);
console.log('date4:',date4);

输出结果：

5.综合使用案例

eg：

let today = this.$moment().valueOf();
let todayStart = this.$moment().startOf("day").format('YYYY-MM-DD');
let yesterStart = this.$moment().subtract(1, "day").startOf("day").valueOf();
let yesterEnd = this.$moment().subtract(1, "day").endOf("day").valueOf();
let monthStart = this.$moment().startOf("month").valueOf();
console.log(today);
console.log(todayStart);
console.log(yesterStart);
console.log(yesterEnd);
console.log(monthStart);

输出结果：

常用的moment.js Api能帮助我们解决大多数‘时间’上的问题。 如果有其他的需求，可以去官方网站。