前言

在日常开发中，我们常常会遇到以下几种场景：
需要对日期进行非标准格式展示，如 ：2021年5月11日星期二下午6点42分
需要对日期进行处理，如：要取前24小时的时间 等
在这时候用js原生的new Date()处理就有些麻烦了，因此我们找到了moment这个类库

一、moment是什么？

moment 是一个 JavaScript 日期处理类库。

二、使用步骤

• 安装 moment

npm install moment -- save

安装完成

PS C:\Gitee\moment-demo> npm install moment -- save
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ save@2.9.0
+ moment@2.29.4
added 12 packages from 14 contributors and audited 877 packages in 13.36s

94 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

看pagejson文件

  "dependencies": {
    "moment": "^2.29.4",
  },

• 引入库
  1.在main.js中全局引入

import moment from "moment"

2.设定moment区域为中国

//import 方式
import 'moment/locale/zh-cn'
moment.locale('zh-cn');   

3.挂载全局变量

Vue.prototype.$moment = moment;

三、日期格式

格式	含义	举例	举例
yyyy	年	2021	同YYYY
M	月	1	不补0
MM	月	01
d	日	2	不补0
dd	日	02
dddd	星期	星期二
H	小时	3	24小时制； 不补0
HH	小时	18	24小时制
h	小时	3	12小时制，须和 A 或 a 使用；不补0
hh	小时	03	12小时制，须和 A 或 a 使用
m	分钟	4	不补0
mm	分钟	04
s	秒	5	不补0
ss	秒	05
A	AM/PM	AM	仅 format 可用，大写
a	am/pm	am	仅 format 可用，小写

四、应用代码示例

1.日期格式化：

• 当前日期格式化

moment().format('MMMM Do YYYY, h:mm:ss a');//六月 3日 2023, 4:18:35 下午
moment().format("dddd");//星期六
moment().format("MMM Do YY");//6月 3日 23
moment().format("YYYY [escaped] YYYY");//2023 escaped 2023
moment().format();//2023-06-03T16:19:37+08:00
moment().format('YYYY-MM-DD');//2023-06-03
moment().format('YYYY-MM-DD h:mm:ss a'); //2023-06-03 4:26:16 下午

• 指定日期格式化

moment("2020-06-03", "YYYY-MM-DD").fromNow(); //3 年前
moment().startOf("day").fromNow(); //当前日期开始即：2023/06/03/00:00:00相对于现在是： 17 小时前
moment().endOf("day").fromNow(); //当前日期结束即：2023/06/04/00:00:00相对于现在是： 7 小时后
moment().startOf("hour").fromNow(); //当前日期小时开始即：2023/06/03/16:00:00相对于现在是： 41 分钟前

• 当前日期向前或者向后推的日期格式化

moment().subtract(13, "days").calendar(); // 当前时间往前推13天的日历时间： 2023/05/21
moment().subtract(3, "days").calendar(); // 当前时间往前推3天： 本周三16:46
moment().subtract(1, "days").calendar(); // 当前时间往前推1天： 昨天16:47
moment().calendar(); // 今天16:48
moment().add(1, "days").calendar(); // 当前时间往后推1天： 明天16:49
moment().add(3, "days").calendar(); // 当前时间往后推3天： 下周二16:50
moment().add(10, "days").calendar(); // 当前时间往后推10天： 2023/06/13

• 其他方式日期格式化

moment().format("L"); //-> 2023/06/03
moment().format('l'); //-> 2023/6/4
moment().format('LL'); //-> 2023年6月4日
moment().format('ll'); //-> 2023年6月4日
moment().format('LLL'); //-> 2023年6月4日凌晨12点08分
moment().format('lll'); //-> 2023年6月4日 00:08
moment().format('LLLL'); //-> 2023年6月4日星期日凌晨12点09分
moment().format('llll'); //-> 2023年6月4日星期日 00:10

2.解析时间

• 当前时间对象

var now = this.$moment(new Date()); //->Sun Jun 04 2023 00:18:45 GMT+0800
var now = this.$moment(); //->Sun Jun 04 2023 00:17:11 GMT+0800

• 字符串解析时间

moment(String);
// 使用字符串创建时间日期对象时，先会检查字符串是否与ISO-8601相匹配，然后再通过 new Date(String) 创建对象

//ISO 8601字符串需要日期部分
2013-02-08  # A calendar date part
2013-W06-5  # A week date part
2013-039    # An ordinal date part

//还可以包括时间部分，通过空格或大写字母T与日期部分分开
2013-02-08T09            # An hour time part separated by a T
2013-02-08 09            # An hour time part separated by a space
2013-02-08 09:30         # An hour and minute time part
2013-02-08 09:30:26      # An hour, minute, and second time part
2013-02-08 09:30:26.123  # An hour, minute, second, and millisecond time part
2013-02-08 24:00:00.000  # hour 24, minute, second, millisecond equal 0 means next day at midnight

//任何日期部分都可以包含时间部分
2013-02-08 09  # A calendar date part and hour time part
2013-W06-5 09  # A week date part and hour time part
2013-039 09    # An ordinal date part and hour time part

//如果一个时间部分被包括，一个从UTC偏移量也可被包括为+-HH:mm，+-HHmm，或Z
2013-02-08 09+07:00            # +-HH:mm
2013-02-08 09-0100             # +-HHmm
2013-02-08 09Z                 # Z
2013-02-08 09:30:26.123+07:00  # +-HH:mm

//如果字符串与上述任何格式都不匹配且无法解析Date.parse，moment#isValid则返回false
moment("not a real date").isValid(); // false

• 字符串+格式 创建对象

moment(String, String);
moment(String, String, String);
moment(String, String, Boolean);
moment(String, String, String, Boolean);
//如果您知道输入字符串的格式，则可以使用它来解析片刻
moment("12-25-1995", "MM-DD-YYYY");
//解析器忽略非字母数字字符，因此以下两个都将返回相同的内容
moment("12-25-1995", "MM-DD-YYYY");
moment("12/25/1995", "MM-DD-YYYY");

• 多时间格式解析

moment(String, String[], String, Boolean);
moment("12-25-1995", ["MM-DD-YYYY", "YYYY-MM-DD"]);
//首选阵列中较早的格式
moment("29-06-1995", ["MM-DD-YYYY", "DD-MM", "DD-MM-YYYY"]); // uses the last format
moment("05-06-1995", ["MM-DD-YYYY", "DD-MM-YYYY"]);          // uses the first format
//还可以指定locale和strictness参数。它们的工作方式与单格式情况相同
moment("29-06-1995", ["MM-DD-YYYY", "DD-MM-YYYY"], 'fr');       // uses 'fr' locale
moment("29-06-1995", ["MM-DD-YYYY", "DD-MM-YYYY"], true);       // uses strict parsing
moment("05-06-1995", ["MM-DD-YYYY", "DD-MM-YYYY"], 'fr', true); // uses 'fr' locale and strict parsing

• 常用函数说明

//获取当前时间
moment();//Sun Jun 04 2023 15:12:11 GMT+0800

//获取今天0时0分0秒
moment().startOf('day'); /Sun Jun 04 2023 00:00:00 GMT+0800

//获取本周第一天(周日)0时0分0秒
moment().startOf("week"); //Mon May 29 2023 00:00:00 GMT+0800

//获取本周周一0时0分0秒
moment().startOf("isoWeek"); //Mon May 29 2023 00:00:00 GMT+0800

//获取当前月第一天0时0分0秒
moment().startOf("month"); //Thu Jun 01 2023 00:00:00 GMT+0800

//获取今天23时59分59秒
moment().endOf("day"); //Sun Jun 04 2023 23:59:59 GMT+0800

//获取本周最后一天(周六)23时59分59秒
moment().endOf("week"); //Sun Jun 04 2023 23:59:59 GMT+0800

//获取本周周日23时59分59秒
moment().endOf("isoWeek"); //Sun Jun 04 2023 23:59:59 GMT+0800

//获取当前月最后一天23时59分59秒
moment().endOf("month"); //Fri Jun 30 2023 23:59:59 GMT+0800

//获取当前月的总天数
moment().daysInMonth(); //30

//获取时间戳(以秒为单位)
moment().unix(); //1685863710
moment().format('X'); //1685863669

//获取时间戳(以毫秒为单位)
moment().valueOf(); //返回值为数值型:1685863954482
moment().format('x'); // 返回值为字符串类型:1685863897121

//获取年份
moment().year(); //2023
moment().get("year"); //2023

//获取月份
moment().month(); //5
moment().get("month"); //5

//获取一个月中的某一天
moment().date(); //4
moment().get("date"); //4

//获取一个星期中的某一天
moment().day(); //4
moment().weekday(); //6
moment().isoWeekday(); //7
moment().get("day"); //0
moment().get("weekday"); //6
moment().get("isoWeekday"); //7

//获取小时
moment().hours(); //15
moment().get("hours"); //15

//获取分钟
moment().minutes(); //46
moment().get("minutes"); //46

//获取秒数
moment().seconds(); //24
moment().get("seconds"); //41

//获取当前的年月日时分秒
moment().toArray(); //[ 2023, 5, 4, 15, 48, 40, 288 ]
moment().toObject(); //{ "years": 2023, "months": 5, "date": 4, "hours": 15, "minutes": 49, "seconds": 9, "milliseconds": 386 }

五、new Date() 相关

日期都写这么多了，那new Date()也一起总结下吧

let time = new Date();  //获取当前时间  Tue May 11 2021 18:42:51 GMT+0800 (中国标准时间)

let year = time.getFullYear();  //获取年 2021
let month = time.getMonth() + 1;  //获取月  5
let day = time.getDate();    //获取天  11

let h = time.getHours();   //获取小时  18
let m = time.getMinutes();  //获取分钟  42
let s = time.getSeconds();    //获取秒  51

let weekDay = time.getDay();  //获取星期  2