前端实用插件-日期处理工具Day.js

前端实用插件-日期处理工具Day.js

前言

前端程序猿们在开发中肯定会遇到需要对Date做各种处理的场景，给大家介绍个我当前用的“真香”插件 Day.js，主打一个体积小（2KB）、功能全、易上手

使用方式

这里只说下nodeJS环境和浏览器环境下的引入方式

1. 方法1：nodeJs环境。请根据平日安装node_modules依赖的方式选择性下载

命令1：npm install dayjs -S
或
命令2：cnpm install dayjs -S
或
命令3：yarn add dayjs -S

1. 方法2：浏览器环境。以下几个地址都可以直接引用，也可以下载到本地后引入到项目内，方式任君挑选

<script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>
或
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
或
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.10/dayjs.min.js"></script>
或
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dayjs.min.js"></script>

主要功能介绍

1. 获取当前日期及设置格式

var nowD=dayjs().format('YYYY-MM-DD');//等价于dayjs(new Date()).format('YYYY-MM-DD')
 console.log(nowD);//结果：2023-09-03var nowD=dayjs().format('YYYY/MM/DD');  
 console.log(nowD);//结果：2023/09/03var nowD=dayjs().format('YYYY年MM月DD日');  
 console.log(nowD);//结果：2023年09月03日var nowD=dayjs().format('YY/M/D');  
 console.log(nowD);//结果：23/9/3

说明：
1.YYYY-返回4位年份、YY-年份后两位数、
2.MM-返回01-12月份数字（小于10补0）、M-返回1-12中月份数字（小于10不补0）
3.DD-返回01-31内日期（小于10补0）、M-返回1-31中日期（小于10不补0）

2. 获取当前时间及设置格式

//测试时间：2023/09/03 16:04:19var nowT=dayjs().format('YYYY-MM-DD HH:mm:ss');  
console.log(nowT);//结果：2023-09-03 16:04:19var nowT=dayjs().format('YYYY年M月D日 H:m:ss');  
console.log(nowT);//结果：2023年9月3日 16:4:19var nowT=dayjs().format('YYYY-MM-DD hh:mm:ss');  
console.log(nowT);//结果：2023-09-03 04:04:19var nowT=dayjs().format('YYYY-M-D h:m:ss');  
console.log(nowT);//结果：2023-9-3 4:4:19var nowT=dayjs().format('YYYY/MM/DD H:m:ss');  
console.log(nowT);//结果：2023/10/30 16:4:19var nowT=dayjs().format('YYYY-MM-DD HH:mm:ss.SSS');  
console.log(nowT);//结果：2023-10-30 16:4:19.399

说明：
1.HH-24小时制-返回01-24内小时数值（小于10补0）、H--24小时制-返回1-24内小时数值（小于10不补0）
2. hh-12小时制-返回01-12内小时数值（小于10补0）、h-12小时制-返回1-12内小时数值（小于10不补0），比如下午16点，hh返回04，h返回43. mm-返回00-59内分钟数值（小于10补0）、m-返回0-59内分钟数值（小于10不补0）
4. ss-返回00-59内秒数值（小于10补0）、s-返回0-59内分钟数值（小于10不补0）
5.SSS-返回三位毫秒数

3. 特定时间格式化

//对下面时间进行格式转换var sd ="2023/9/9 16:30:00";var nowS=dayjs(sd).format('YYYY-MM-DD HH:mm:ss');  
console.log(nowS);//结果：2023-09-09 16:30:00var nowS=dayjs(sd).format('YYYY/MM/DD HH:mm:ss');  
console.log(nowS);//结果：2023/09/09 16:30:00var nowS=dayjs(sd).format('YYYY年MM月DD日 HH:mm:ss');  
console.log(nowS);//结果：2023年09月09日 16:30:00

4. 日期 加add、减subtract、差值diff 运算

//测试时间：2023/09/03 16:04:19//加6天var newDate =dayjs('2023/09/03 16:04:19').add(6,'day').format('YYYY-MM-DD HH:mm:ss');
console.log(newDate);//2023-09-09 16:04:19 //加1周var newDate =dayjs('2023/09/03 16:04:19').add(1,'week').format('YYYY-MM-DD HH:mm:ss');
console.log(newDate);//2023-09-10 16:04:19 //加2月var newDate =dayjs('2023/09/03 16:04:19').add(2,'M').format('YYYY-MM-DD HH:mm:ss');
console.log(newDate);//2023-11-03 16:04:19 //加1年var newDate =dayjs('2023/09/03 16:04:19').add(1,'year').format('YYYY-MM-DD HH:mm:ss');
console.log(newDate);//2024-09-03 16:04:19 //加1小时var newDate =dayjs('2023/09/03 16:04:19').add(1,'hour').format('YYYY-MM-DD HH:mm:ss');
console.log(newDate);//2023-09-03 17:04:19 //加30分钟var newDate =dayjs('2023/09/03 16:04:19').add(30,'minute').format('YYYY-MM-DD HH:mm:ss');
console.log(newDate);//2023-09-33 16:04:19 //减6天var newDate =dayjs('2023/09/03 16:04:19').subtract(6,'day').format('YYYY-MM-DD HH:mm:ss');
console.log(newDate);//2023-08-28 16:04:19 //减1周var newDate =dayjs('2023/09/03 16:04:19').subtract(1,'week').format('YYYY-MM-DD HH:mm:ss');
console.log(newDate);//2023-08-27 16:04:19 //减2月var newDate =dayjs('2023/09/03 16:04:19').subtract(2,'M').format('YYYY-MM-DD HH:mm:ss');
console.log(newDate);//2023-07-03 16:04:19 //减1年var newDate =dayjs('2023/09/03 16:04:19').subtract(1,'year').format('YYYY-MM-DD HH:mm:ss');
console.log(newDate);//2022-09-03 16:04:19 //减1小时var newDate =dayjs('2023/09/03 16:04:19').subtract(1,'hour').format('YYYY-MM-DD HH:mm:ss');
console.log(newDate);//2023-09-03 15:04:19 //减30分钟var newDate =dayjs('2023/09/03 16:04:19').subtract(30,'minute').format('YYYY-MM-DD HH:mm:ss');
console.log(newDate);//2023-09-33 15:34:19 //链式加、减结合使用：先加1天再减30分钟var newDate =dayjs('2023/09/03 16:04:19').add(1,'day').subtract(30,'minute').format('YYYY-MM-DD HH:mm:ss');
console.log(newDate);//2023-09-04 15:34:19 //diff计算两个日期的差值var date1 =dayjs('2023/09/03 16:04:19');var date2 =dayjs('2022/08/02 16:04:19');
date1.diff(date2 ,'day')// 397
date1.diff(date2 ,'month')// 13
date1.diff(date2 ,'year')// 1

5. “是否”查询

let date1 ="2023/09/16", date2 ="2023/08/16"//1. 是否之前let result =dayjs(date1).isBefore(dayjs(date2));//false//2. 是否之后let result =dayjs(date1).isAfter(dayjs(date2));//true//3.是否相同let result =dayjs(date1).isSame(dayjs(date2));//false//4.其它方法let result =dayjs(date1).isSameOrBefore(dayjs(date2));//是否等于或者在2023/8/16之前，返回falselet result =dayjs(date1).isSameOrAfter(dayjs(date2));//是否等于或者在2023/8/16之后，返回truelet result =dayjs(date1).isBetween('2023/07/01',dayjs(date2));//是否在[2023/7/1, 2023/8/16]之间，返回false//5. 是否闰年:需先引入isLeapYear插件，然后使用var isLeapYear =require('dayjs/plugin/isLeapYear'); 
dayjs.extend(isLeapYear)dayjs('2000-01-01').isLeapYear()// true

其它查询：需要先加载对应插件，插件加载方式点击查看

6. 常用获取“某个”日期方法

//测试时间：2023/09/03 16:04:19//1. 获取近7天日期区间let now =dayjs('2023/09/03 16:04:19');//当前日期对象let nS7 = now.subtract(7,'day');//减7天return[nS7.format('YYYY/MM/DD'), now.format('YYYY/MM/DD')];//输出：['2023/08/27','2023/09/03']
说明：如果要获取区间集合，可以使用for循环遍历7次+每次add(1，'day')得到每天的日期数值

//2. 获取某月初日期方法1：直接利用format('YYYY-MM-01')指定日期
let now =dayjs('2023/09/03 16:04:19');//当前日期对象return now.format('YYYY-MM-01');//输出：2023-09-01
方法2：通过startOf
let now =dayjs('2023/09/03 16:04:19');//当前日期对象return now.startOf('month').format('YYYY-MM-01');//输出：2023-09-01//3. 获取某月末日期
方法1：先获取下月1号，再减1天
let now =dayjs('2023/09/03 16:04:19');//当前日期对象return now.add(1,'month').startOf('month').subtract(1,'day').format('YYYY-MM-DD');//输出：2023-09-30

方法2（推荐）：通过endOf
let now =dayjs('2023/09/03 16:04:19');//当前日期对象return now.endOf('month').format('YYYY-MM-DD');//输出：2023-09-30//4. 获取某年初日期let now =dayjs('2023/09/03 16:04:19');//当前日期对象return now.startOf('year').format('YYYY-MM-DD');//输出：2023-01-01//5. 获取某年末日期let now =dayjs('2023/09/03 16:04:19');//当前日期对象return now.endOf('month').format('YYYY-MM-DD');//输出：2023-12-31//6. 获取某周初日期let now =dayjs('2023/09/03 16:04:19');//当前日期对象return now.startOf('week').format('YYYY-MM-DD');//输出：2023-09-03//7. 获取某周末日期let now =dayjs('2023/09/03 16:04:19');//当前日期对象return now.endOf('week').format('YYYY-MM-DD');//输出：2023-09-09//8. 获取某日期所属月份的天数let now =dayjs('2023/09/03 16:04:19');//当前日期对象return now.daysInMonth();//输出：30

7. 常用获取“某段”日期集合

//1. 获取近30天的日期集合functionget30Days(){let now ="2023/09/03";//假设当日日期为2023.9.30let days30 =[now];for(let i =0; i <30; i++){let day =dayjs(days30[0]).subtract(1,'day').format('YYYY/MM/DD');
    days30.unshift(day);};
  console.log("近30天的日期集合：",JSON.stringify(days30));return days30;}
结果：
["2023/08/04","2023/08/05","2023/08/06","2023/08/07","2023/08/08","2023/08/09","2023/08/10","2023/08/11","2023/08/12","2023/08/13","2023/08/14","2023/08/15","2023/08/16","2023/08/17","2023/08/18","2023/08/19","2023/08/20","2023/08/21","2023/08/22","2023/08/23","2023/08/24","2023/08/25","2023/08/26","2023/08/27","2023/08/28","2023/08/29","2023/08/30","2023/08/31","2023/09/01","2023/09/02","2023/09/03"]//2. 获取当月日期集合functiongetDaysInMonth(){let now ="2023/09/03";//假设当日日期为2023.9.30let daysNum =dayjs(now).daysInMonth();//获取当月天数，返回30let firstDay =dayjs(now).startOf('month').format('YYYY/MM/DD');//获取第一天的日期let daysArr =[firstDay];for(let i =0; i < daysNum; i++){let day =dayjs(daysArr[i]).add(1,'day').format('YYYY/MM/DD');
    daysArr.push(day);};
  console.log("当月日期集合：",JSON.stringify(daysArr));return daysArr;}

结果：
["2023/09/01","2023/09/02","2023/09/03","2023/09/04","2023/09/05","2023/09/06","2023/09/07","2023/09/08","2023/09/09","2023/09/10","2023/09/11","2023/09/12","2023/09/13","2023/09/14","2023/09/15","2023/09/16","2023/09/17","2023/09/18","2023/09/19","2023/09/20","2023/09/21","2023/09/22","2023/09/23","2023/09/24","2023/09/25","2023/09/26","2023/09/27","2023/09/28","2023/09/29","2023/09/30","2023/10/01"]//3. 获取近一年内某月末日期集合functiongetMonthsInYear(){let now ="2023/09/03";//假设当日日期为2023.9.30let startMonth =dayjs(now).subtract(1,'year').endOf('month').format('YYYY/MM/DD');//获取上一年的同等月末日期，返回2022/09/30let monthArr =[startMonth];for(let i =0; i <12; i++){//近一年，12个月let month =dayjs(monthArr[i]).add(1,'month').format('YYYY/MM/DD');if(dayjs(now).isAfter(dayjs(month))){//月末日期不得大于2023.9.30
      monthArr.push(month);}};
  console.log("近一年内月末日期集合：",JSON.stringify(monthArr));return monthArr;}
结果：
["2022/09/30","2022/10/30","2022/11/30","2022/12/30","2023/01/30","2023/02/28","2023/03/28","2023/04/28","2023/05/28","2023/06/28","2023/07/28","2023/08/28"]

最后

暂时先更新到这儿、后续会持续更新…
学海无涯~~~~~