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

时间：2025-01-22 07:15:37

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

  • 前言
  • 使用方式
  • 主要功能介绍
    • 1. 获取当前日期及设置格式
    • 2. 获取当前时间及设置格式
    • 3. 特定时间格式化
    • 4. 日期 加add、减subtract、差值diff 运算
    • 5. “是否”查询
    • 6. 常用获取“某个”日期方法
    • 7. 常用获取“某段”日期集合
  • 最后

前言

前端程序猿们在开发中肯定会遇到需要对Date做各种处理的场景，给大家介绍个我当前用的“真香”插件 ，主打一个体积小（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="/dayjs@1.8.21/"></script>
或
<script src="/ajax/libs/dayjs/1.11.9/"></script>
或
<script src="/ajax/libs/dayjs/1.11.10/"></script>
或
<script src="/npm/dayjs@1.11.10/"></script>

主要功能介绍

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

 var nowD= dayjs().format('YYYY-MM-DD');  //等价于dayjs(new Date()).format('YYYY-MM-DD')
 console.log(nowD);//结果：2023-09-03
 
 var nowD= dayjs().format('YYYY/MM/DD');  
 console.log(nowD);//结果：2023/09/03
 
 var 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:19
var nowT= dayjs().format('YYYY-MM-DD HH:mm:ss');  
console.log(nowT);//结果：2023-09-03 16:04:19

var nowT= dayjs().format('YYYY年M月D日 H:m:ss');  
console.log(nowT);//结果：2023年9月3日 16:4:19

var nowT= dayjs().format('YYYY-MM-DD hh:mm:ss');  
console.log(nowT);//结果：2023-09-03 04:04:19

var nowT= dayjs().format('YYYY-M-D h:m:ss');  
console.log(nowT);//结果：2023-9-3 4:4:19

var nowT= dayjs().format('YYYY/MM/DD H:m:ss');  
console.log(nowT);//结果：2023/10/30 16:4:19

var nowT= dayjs().format('YYYY-MM-DD HH:mm:');  
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返回4
3. 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:00

var nowS= dayjs(sd).format('YYYY/MM/DD HH:mm:ss');  
console.log(nowS);//结果：2023/09/09 16:30:00

var 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之前，返回false
let result = dayjs(date1).isSameOrAfter(dayjs(date2)); //是否等于或者在2023/8/16之后，返回true
let 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天的日期集合
function get30Days() {
  let now = "2023/09/03";//假设当日日期为2023.9.30
  let 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. 获取当月日期集合
function getDaysInMonth() {
  let now = "2023/09/03";//假设当日日期为2023.9.30
  let daysNum = dayjs(now).daysInMonth();//获取当月天数，返回30
  let 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. 获取近一年内某月末日期集合
function getMonthsInYear() {
  let now = "2023/09/03";//假设当日日期为2023.9.30
  let startMonth = dayjs(now).subtract(1, 'year').endOf('month').format('YYYY/MM/DD');//获取上一年的同等月末日期，返回2022/09/30
  
  let 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"]

最后

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

相关文章