前言
  • Day.js 是代替修改本地Date.prototypeDay.jsDate对象进行了封装,只需要调用Dayjs()即可。
  • 相对moment.js而已,day.js的体积更小,只有2KB左右;moment.min.js 有16.7KB。
  • 对应普通项目来说,对应时间的操作就只有那么几个(格式化、查询、计算),这些基于Day.js完全足够。并且Day.js的文档相对简单、清晰!

该文章对比之前的moment.js的文章
Day.js官方文档

当前文章很多实例是以当前时间来处理的, 当前时间为:2022-04-20

1. 初始化日期 / 时间
dayjs().format('YYYY-MM-DD');          // 初始化日期
dayjs().format('YYYY-MM-DD HH:mm:ss');  // 初始化日期时间
2. 格式化日期 / 时间
dayjs(value).format('YYYY-MM-DD');         // 初始化日期
dayjs(value).format('YYYY-MM-DD HH:mm:ss'); // 初始化日期时间
3. 加 / 减

dayjs().add / dayjs().subtract 代表在当前时间上去加减;
dayjs(value).add / dayjs(value).subtract 代表在指定时间(value)上去加减;

dayjs().add(7, 'day').format('YYYY-MM-DD');   // 2022-04-27 今天(2022-04-20)加上7天
dayjs().add(1, 'month').format('YYYY-MM-DD');   // 2022-05-20 今天(2022-04-20)加上一月dayjs().subtract(2, 'year').format('YYYY-MM-DD');   // 2020-05-20 今天(2022-04-20)减去2年
dayjs().subtract(2, 'hour').format('YYYY-MM-DD HH:mm:ss');   // 2022-04-20 14:03:39 今天现在(2022-04-20 16:03:39)减去2小时

所有可用单位列表:

单位 缩写 描述
week w
day d 星期(星期日0,星期六6)
month M 月份(0-11)
year y
hour h 小时
minute m 分钟
second s
millisecond ms 毫秒
4. 获取某年某月的第一天或最后一天

获取某年某月的第一天

dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss')   // 2022-01-01 00:00:00  => 第一天格式化出来的时分秒都是0
dayjs().startOf('month').format('YYYY-MM-DD')   // 2022-04-01

获取某年某月的最后一天

dayjs().endOf('year').format('YYYY-MM-DD HH:mm:ss')   // 2022-12-31 23:59:59  => 最后时间 格式化出来的时分秒是23:59:59
dayjs().endOf('month').format('YYYY-MM-DD')   // 2022-04-30
5. 获取星期几

dayjs().day() : 返回0(星期日)到6(星期六)的数字

设置时也只能接受 0-6 的数字:
dayjs().day(6).format('YYYY-MM-DD'):获取最近周六的日期 => 2022-04-23
dayjs().day(0).format('YYYY-MM-DD'):获取最近周日的日期 => 2022-04-17

6. 获取毫秒数

dayjs('2019-01-25').valueOf()dayjs().valueOf()

7. 获取时间差(默认输出的差值单位是毫秒)
dayjs('2019-01-25').diff('2018-06-05', 'month');         // 7
dayjs('2019-01-25').diff(dayjs('2018-06-05'), 'month');  // 7

所有可用输出单位列表:

单位 缩写 描述
week w
day d 星期(星期日0,星期六6)
month M 月份(0-11)
year y
hour h 小时
minute m 分钟
second s
millisecond ms 毫秒(默认输出单位)
8. 获取时、分、秒

当前时间:2022-04-20 16:55:55
以下大部分方法都会往前溢出;如毫秒超过999,将持续到秒;秒超过59,将持续到分,这边情况在设置时特别突出!

    console.log('-----获取年', dayjs().year());    // ==>> 2022console.log('-----获取月', dayjs().month());   // 0到11的数字 ==>> 3console.log('-----获取星期', dayjs().day());   // 0(星期日)到6(星期六)的数字 ==>> 3console.log('-----获取天', dayjs().date());    // 1到31的数字 ==>> 20console.log('-----获取小时', dayjs().hour());  // 0到23的数字 ==>> 16console.log('-----获取分钟', dayjs().minute());// 0到59的数字 ==>> 55console.log('-----获取秒', dayjs().second());  // 0到59的数字 ==>> 55console.log('-----获取毫秒', dayjs().millisecond());  // 0到999的数字 ==>> 333
9. 将毫秒转为时分秒
// 下面毫秒数代表:2022-04-20 17:43:20
const timestr = 1650447800731;   // 毫秒值必须是number类型,如果是string,结果可能和你想的不一样
console.log('将毫秒转为年-月-日 时:分:秒', dayjs(timestr).format('YYYY-MM-DD HH:mm:ss'));
console.log('获取年', dayjs(timestr).year()); //
console.log('获取月', dayjs(timestr).month());
console.log('获取天', dayjs(timestr).date());
console.log('获取时', dayjs(timestr).hour());
console.log('获取分', dayjs(timestr).minute());

注意:这里 year()month()date()hour()minute()second()millisecond() 等方法均可使用

10. 判断一个日期是否在另外一个日期之后 isAfter
// day.js 为 2022-04-20
console.log('isAfter', dayjs().isAfter(dayjs('2011-01-01')))                // true
console.log('isAfter', dayjs('2022-04-20').isAfter(dayjs('2022-04-21')))  // false
console.log('isAfter', dayjs('2022-04-20').isAfter(dayjs('2022-04-20')))  // 相同也为false
11. 判断一个日期是否在另外一个日期之前 isBefore
// day.js 为 2022-04-20
console.log('isBefore', dayjs().isBefore(dayjs('2011-01-01')))             // false
console.log('isBefore', dayjs('2022-04-20').isBefore(dayjs('2022-04-21'))) // true
console.log('isBefore', dayjs('2022-04-20').isBefore(dayjs('2022-04-20'))) // 日期相同时也为false
12. 判断两个日期是否相同 isSame
// day.js 为 2022-04-20
console.log('isSame', dayjs().isSame(dayjs('2011-01-01')))              // false
console.log('isSame', dayjs('2022-04-20').isSame(dayjs('2022-04-21')))    // false
console.log('isSame', dayjs('2022-04-20').isSame(dayjs('2022-04-20')))    // true
13. 判断一个日期是否在两个日期之间 isBetween

注意:
此功能依赖IsBetween插件
此处也将演示如何使用 Day.js 的插件

import dayjs from 'dayjs'  // 引入dayjs
import isBetween from 'dayjs/plugin/isBetween'    // 引入相关插件created() {dayjs.extend(isBetween); // 挂载插件// 使用插件console.log('isBetween', dayjs('2010-10-20').isBetween('2010-10-19', dayjs('2010-10-25')) )
}

Day.js 里面有 相同或之前 IsSameOrBefore相同或之后 IsSameOrAfter的方法,可根据实际需求取用,但这两个方法需要依赖相应的插件!

注意:
isAfter、isBefore、isSame、IsBetween 默认都是通过将日期转为milliseconds去比较的,所以这两个方法有第二个参数。即指定比较的粒度
console.log('isBefore', dayjs('2022-04-20').isBefore('2015-01-01', 'year'))

所有可用单位列表:

单位 缩写 描述
date D 天00:00
day d 星期00:00
month M 月第一天00:00
year y 1月1日00点
week w 周第一天00:00
isoWeek 周(ISO)
hour h 小时 00:00:00
minute m 分钟 00:00
second s 秒 00
millisecond ms 毫秒(默认比较单位)0

更多详细用法请参阅 官方文档
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!

Day.js 常用方法相关推荐

  1. Js常用方法:JS字符串截取、数组截取等

    Js常用方法:JS字符串截取.数组截取等 Js常用方法(二)String字符串 .Array数组 减操作 前言:前端开发中最常见的就是对字符串.数组或对象增删改查等操作 下面总结一下常用且比较实用的方 ...

  2. Underscore.js常用方法介绍

    Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程.MVC框架Backbone.js就将这个库作为自 ...

  3. loadsh.js常用方法讲解

    loadsh.js 是一款 JavaScript 实用库,提供了许多常用的函数,可以帮助我们简化开发过程,提高代码质量和效率.本文将详细介绍 loadsh.js 中常用的方法. 1. _.map 该函 ...

  4. 【JS】js常用方法

    function obj$(id) //根据id得到对象 function val$(id) //根据id得到对象的值 function trim(str) //删除左边和右边空格 function ...

  5. JS常用方法模板(更新中)

    因为条目比较乱,所以就先不整理目录了,有需要可以Ctrl+F. 一,比较并返回最高值 maxnumber = Math.max(A, B, C); 注:0 或多个值.在 ECMASCript v3 之 ...

  6. js常用方法,JS实用方法,jq获得文件后缀,解析window。location,解析URL参数

    jq获取文件后缀的方法 var file = "测试文档1111111111.docx"; // 文件 var fileName = file.replace(/.*(\/|\\) ...

  7. js常用方法之Array对象方法扩展

    趁着这段项目少,对Array零散的知识进行一下梳理和总结,以便下次使用,代码如下: 1 /** 2 * 数组通用扩展方法 3 * 4 * @author lixiangqian 20130419 5 ...

  8. js常用方法JQ选择器

    一.数组方法 1.arrayObj.concat():连接两个或多个数组 -- 参数可以是任意值 2.arrayObj.slice(start,end):将数组中star元素开始,到end-1的元素组 ...

  9. jQuery ajax发送POST、JS url跳转、console用法

    总结JS常用方法,以备以后使用 $.post("URL1",{userName: userName, password: password },function(data) {// ...

  10. android封装方法js调用方法吗,common

    @saqqdy/common 介绍 JS常用方法,来自于本人前端多年经验积累 软件架构 集成了大量常用方法,采用了纯原生ES6+babel+webpack的开发方式 安装教程 # 通过npm安装 np ...

最新文章

  1. 第十三周学习进度情况
  2. 海康摄像头 海思AI芯片(Hi35XX): 图像jpg转.bgr
  3. 详解京东商城智能对话系统(生成+检索)
  4. ios 静态库合成_iOS生成静态库方法-iOS集成静态库-iOS合并静态库
  5. 操作系统:体验Windows 11,不到1M的小工具来了!
  6. android volley 线程,android第三方框架(一)过时的框架volley
  7. Navicat 常用快捷键
  8. 深入了解AI在金融、能源领域的网络安全应用
  9. cdate在java中_Java Calendar.add方法代码示例
  10. 灵异:各国家千年诅咒悬迷——不可思议
  11. 敏捷开发 建立愿景、使命_敏捷产品计划:愿景,战略和策略
  12. WIN7计算机如何清除碎片文件,win7怎么清理磁盘碎片 win7磁盘碎片整理打不开怎么办...
  13. 华为M3平板升级鸿蒙系统,华为m3平板 日版刷国行 没有重力感应怎么解决?(篇二)...
  14. 细线表格-今日小说排行榜
  15. duck java_编程语言中的 DUCK TYPING
  16. DataFrame创建数据
  17. 推荐几款简单的音视频编辑软件
  18. 五边形lisp程序_AutoCAD LISP绘制圆内接五边形
  19. 为何在数据库中将手机号设为int型却保存为2147483647
  20. Python学习笔记:第四站 往哪走

热门文章

  1. 浙江大学计算机答辩模板,浙江大学 答辩通用模板
  2. 【软件技能】Perl 基础用法
  3. 为什么正定矩阵等于转置_线性代数28——对称矩阵及正定矩阵,正定性
  4. java算法2——费氏数列
  5. 软件测试与软件质量模型
  6. Spring(三) 表单页面处理
  7. pc端ui图片尺寸_PC端网页尺寸设计一
  8. android获取角速度,android dyrscope sensor 角速度传感器调试
  9. 中国60家最强汽车初创在此!芯片厂高调入局,智能网联强势霸榜
  10. adb之am、pm命令