vue和momentJs：打造高效时间管理的利器

前言

时间管理在我们的生活和工作中占据重要地位，而 vue 框架结合 momentJs 库可以为我们提供更多实用的时间场景应用。本文将介绍如何在 vue 项目中使用 momentJs 库，探讨各种时间场景下的应用实例。

---

安装

npm install moment --save
cnpm install moment --save

引用

import moment from "moment";
//引入中文包
import 'moment/locale/zh-cn';

---

配置方法

1. 日期格式化（format）

实例：

moment().format("YYYY年MM月DD日"); // 2022年07月11日

---

2. 相对时间（fromNow）

实例：

moment().startOf('hour').fromNow(); // 12 分钟前

---

3. 日历时间（calendar）

实例：

moment().add(4, 'days').calendar(); // 本周五10:11

---

4. 获取 subtract 方法

参数：

.subtract(Number, String);

实例：

// years:年  months:月  days:日
moment().subtract(1, 'months') .format("YYYY-MM-DD HH:mm:ss"); // 2022-06-11 10:40:03

---

5. 获取 get 方法

实例：

// years:年  months:月  days:日
moment().get('year') // 2022

---

6. 开始 startOf 方法

参数：

.startOf(String);

实例：

moment().startOf('day').format("YYYY-MM-DD HH:mm:ss"); // 2022-07-11 00:00:00

---

7. 结束 endOf 方法

参数：

.endOf(String);

实例：

moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"); // 2022-07-11 23:59:59

除了以上这些，momentJs 中还有非常多的方法，这里就不一一列举，大家感兴趣可以直接到官方文档地址查看：http://momentjs.cn/

---

常用的获取日期方法

1.获取当前日期

let dateTime = moment().format("YYYY-MM-DD HH:mm:ss");
console.log(dateTime); // // 2022-07-11 11:07:50

---

2.获取昨天的日期

let dateTime = moment().subtract(1,'day').format('YYYY-MM-DD HH:mm:ss');
console.log(dateTime); // 2022-07-10 11:27:09

---

3.获取本周第一天

let dateTime = moment().weekday(0).format('YYYY-MM-DD HH:mm:ss'); 
console.log(dateTime); // 2022-07-11 11:29:32

---

4.获取本周最后一天

let dateTime = moment().weekday(6).format("YYYY-MM-DD HH:mm:ss");
console.log(dateTime); // 2022-07-17 11:30:20

---

5.获取本月第一天

let dateTime = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss');
console.log(dateTime); // 2022-07-01 00:00:00

---

6.获取本月最后一天

let dateTime = moment().endOf('month').format('YYYY-MM-DD HH:mm:ss');
console.log(dateTime); // 2022-07-31 23:59:59

---

7.获取本月最后一天

let dateTime = moment().endOf('month').format('YYYY-MM-DD HH:mm:ss');
console.log(dateTime); // 2022-07-31 23:59:59

---

8.获取上月第一天

let dateTime = moment().subtract(1,'month').startOf('month').format('YYYY-MM-DD HH:mm:ss');
console.log(dateTime); // 2022-06-01 00:00:00

---

9.获取上月最后一天

let dateTime = moment().subtract(1,'month').endOf('month').format('YYYY-MM-DD HH:mm:ss');
console.log(dateTime); // 2022-06-30 23:59:59

---

10.获取本年第一天

let dateTime = moment().startOf('year').format('YYYY-MM-DD HH:mm:ss');
console.log(dateTime); // 2022-01-01 00:00:00

---

11.获取本年最后一天

let dateTime = moment().subtract(1,'year').endOf('year').format('YYYY-MM-DD HH:mm:ss');
console.log(dateTime); // 2021-12-31 23:59:59

---

12.获取去年第一天

let dateTime = moment().subtract(1,'year').startOf('year').format('YYYY-MM-DD HH:mm:ss');
console.log(dateTime); // 2021-01-01 00:00:00

---

13.获取去年最后一天

let dateTime = moment().subtract(1,'year').endOf('year').format('YYYY-MM-DD HH:mm:ss');
console.log(dateTime); // 2021-12-31 23:59:59

---

14.获取去年的今天

let dateTime = moment().subtract(1,'year').format('YYYY-MM-DD HH:mm:ss');
console.log(dateTime); // 2021-07-11 11:37:01

---

15.获取今天周几

let dateTime = moment().format('dddd');
console.log(dateTime); // 星期四

总结

有关于网上 date-fns.js 和 moment.js 的对比也是层出不穷，其实我在使用两款插件的过程中觉得它们都互有不足，但又各有各的优势，比如 moment.js 体积比较大，而 date-fns.js 体积非常小；又或者 moment.js 支持全局引入，而 date-fns.js 却不支持，诸如此类的对比我就不多做赘述了，如果你对 date-fns.js 感兴趣的话，也可以参考博主的另一篇文章 JavaScript日期库之date-fn.js。