前言
在日常开发中，我们常常会遇到以下几种场景：
需要对日期进行非标准格式展示，如 ：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
