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

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

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

    前言

    前端程序猿们在开发中肯定会遇到需要对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：浏览器环境。以下几个地址都可以直接引用，也可以下载到本地后引入到项目内，方式任君挑选

    或或或

    主要功能介绍

    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: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') // 397date1.diff(date2 , 'month') // 13date1.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：通过startOflet 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（推荐）：通过endOflet 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];  findex.php/tags-1038.html" >or(let i = 0; i  
    最后
     
    暂时先更新到这儿、后续会持续更新…
    学海无涯~~~~~