基于Day.js更优雅的处理JavaScript中的日期
今天我推荐给大家一个库 Day.js,它能够帮助我们处理JavaScript中的日期,因为JavaScript中的日期实在是太难用了。在做业务开发时完全无法使用,需要自己去封装各种函数。
为什么使用day.js
首先,使用day.js能够帮助我们更简单的处理JavaScript中的日期和时间。
在JavaScript中处理时间的库你可能听说很多,比如Moment,但都2021年了,其实是非常不推荐使用moment.js的,因为作为日期处理工具,它过于的笨重,day.js是更现代并且更轻量化,更加容易扩展的一个库。
Moment.js
点击这里查看体积大小
Day.js
点击这里查看体积大小
它非常轻量化,因为它可以利用TreeShaking,并且通过插件的方式来进行扩展,我们可以根据自己的需求去引入插件,所以我们最后只会引入我们需要的东西。
没有day.js我们怎么办
在原生的JavaScript中,我们要获取当前的日期要这样
const today = new Date(); const dd = String(today.getDate()).padStart(2, '0'); // 日 const mm = String(today.getMonth() + 1).padStart(2, '0'); // 月 const yyyy = today.getFullYear(); // 年 const curDate = `${yyyy}-${mm}-${dd}` console.log(curDate) // 输出: 2021-09-17 在day.js中我们只需这样,当然不止这样,还支持很多功能。 import dayjs from "dayjs"; const curDate = dayjs().format('YYYY-MM-DD'); console.log(curDate) // 输出: 2021-09-17
Day.js 例子
现在我们来看一些实用、有趣的例子,与原生API相比,它更加简单,而且可读性更强。
1. 获取两个日期相差的天数
查看文档
import dayjs from "dayjs"; // 第二个参数指定为'day'代表以日为颗粒度 dayjs(new Date(2021, 10, 1)).diff(new Date(2021, 9, 17), "day"); // 输出: 15
2. 检查日期是否合法
查看文档
import dayjs from "dayjs"; dayjs("20").isValid(); // 输出: false dayjs("2021-09-17").isValid(); // 输出: true
3. 获取输入日期月份的天数
查看文档
import dayjs from "dayjs"; dayjs("2021-09-13").daysInMonth() // 输出: 30
4. 添加日、月、年、时、分、秒
查看文档
import dayjs from "dayjs"; dayjs("2021-09-17 08:10:00").add(20, "minute").format('YYYY-MM-DD HH:mm:ss') // 输出: 2021-09-17 08:30:00
5. 减去日、月、年、时、分、秒
查看文档
import dayjs from "dayjs"; dayjs("2021-09-17 08:10:00").subtract(20, "minute").format('YYYY-MM-DD HH:mm:ss') // 输出: 2021-09-17 07:50:00
使用插件来扩展功能
1. RelativeTime
查看文档
获取指定时间到现在的时间差。
import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; dayjs.extend(relativeTime); dayjs("2021-09-16 13:28:55").fromNow(); // 输出: 9 hours ago
下面是所有的输出表
Range | Key | Sample Output |
---|---|---|
0 to 44 秒 | s | a few seconds ago |
45 to 89 秒 | m | a minute ago |
90 秒 to 44 分钟 | mm | 2 minutes ago ... 44 minutes ago |
45 to 89 分钟 | h | an hour ago |
90 分钟 to 21 小时 | hh | 2 hours ago ... 21 hours ago |
22 to 35 小时 | d | a day ago |
36 小时 to 25 天 | dd | 2 days ago ... 25 days ago |
26 to 45 天 | M | a month ago |
46 天 to 10 月 | MM | 2 months ago ... 10 months ago |
11 月 to 17月 | y | a year ago |
18 月+ | yy | 2 years ago ... 20 years ago |
2. WeekOfYear
查看文档
获取指定日期是当年的第几周
import dayjs from "dayjs"; import weekOfYear from "dayjs/plugin/weekOfYear"; dayjs.extend(weekOfYear); dayjs("2021-09-13 14:00:00").week(); // 输出: 38
3. IsSameOrAfter
查看文档
检查一个日期是否等于或者大于一个日期
import dayjs from "dayjs"; import isSameOrAfter from "dayjs/plugin/isSameOrAfter"; dayjs.extend(isSameOrAfter); dayjs("2021-09-17").isSameOrAfter("2021-09-16"); // 输出: true
4. MinMax
查看文档
获取数组中最大的日期,或者最小的日期
import dayjs from "dayjs"; import minMax from "dayjs/plugin/minMax"; dayjs.extend(minMax) const maxDate = dayjs.max([ dayjs("2021-09-13"), dayjs("2021-09-16"), dayjs("2021-09-20") ]) const minDate = dayjs.min([ dayjs("2021-09-13"), dayjs("2021-09-16"), dayjs("2021-09-20") ]) maxDate.format('YYYY-MM-DD HH:mm:ss') // 输出: 2021-09-20 00:00:00 minDate.format('YYYY-MM-DD HH:mm:ss') // 输出: 2021-09-13 00:00:00
5. IsBetween
查看文档
检查指定日期是否在指定的日期范围内
import dayjs from "dayjs"; import isBetween from "dayjs/plugin/isBetween"; dayjs.extend(isBetween); // 使用日为颗粒度进行比较 dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "day"); // 输出: true // 使用年为颗粒度进行比较 dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "year"); // 输出: false
到此这篇关于基于Day.js更优雅的处理JavaScript中的日期的文章就介绍到这了,更多相关Day.js处理日期内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 一、日期减去天数等于第二个日期function cc(dd,dadd){//可以加上错误处理var a = new Date(dd)a = a.valueOf()a = a - dadd * 24 * 60 * 60 * 1000a = new Date(a)alert(a.getFullYear() + "年" + (a.getMonth() +...2015-11-08
- 本文实例讲述了php计算两个日期相差天数的方法。...2015-03-15
- 这篇文章主要介绍了PostgreSQL 字符串处理与日期处理操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-01
- moment是一款多语言支持的日期处理类库, 在vue中如何使用呢?这篇文章主要给大家介绍了关于vue之moment使用的相关资料,需要的朋友可以参考下...2021-05-13
- 实例讲解之前,先来介绍几个核心函数: mktime 函数 mktime() 函数返回一个日期的 Unix 时间戳。 参数总是表示 GMT 日期,因此 is_dst 对结果没有影响。 参数可以从右到左依次空着,空着的参数会被设为相应的当前 GMT 值。...2015-11-08
- 这篇文章主要介绍了C#实现将字符串转换成日期格式的方法,涉及C#操作时间及字符串的相关技巧,非常简单实用,需要的朋友可以参考下...2020-06-25
- 分享一个利用php根据日期或时间戳获取相应的干支纪年,生肖和星座信息的函数方法,具体函数代码以及使用方法如下: /** 判断干支、生肖和星座 */ function birthext($birth){ if(strstr($birth,'-')===false&&strlen($bi...2015-10-21
java8时间 yyyyMMddHHmmss格式转为日期的代码
这篇文章主要介绍了java8时间 yyyyMMddHHmmss格式转为日期的代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-17- 这篇文章主要介绍了C#判断日期是否到期的方法,是C#程序设计中非常实用的技巧,需要的朋友可以参考下...2020-06-25
- 在本篇内容中小编给大家整理了关于C#比较日期的方法和相关知识点,有需要的朋友们学习下。...2020-06-25
- 这篇文章主要介绍了sql通过日期判断年龄函数,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-16
- 最近在做一个列表的时候,涉及到时间格式化操作。本文主要介绍了微信小程序wxs日期时间处理的实现示例,分享给大家,感兴趣的可以了解一下...2021-07-22
jQuery DateTimePicker 日期和时间插件示例
jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,这篇文章主要介绍了jQuery DateTimePicker 日期和时间插件示例,有兴趣的可以了解一下。...2017-01-26- 下面小编就为大家带来一篇C语言实现时间戳转日期的算法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-04-25
- JavaScript获取当前日期时间同时显示星期几,具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="/jquery/1.7.0/jquery.min.js...2015-10-23
- 这篇文章主要为大家详细介绍了微信小程序实现根据日期和时间排序功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-26
- 公司电脑各式各样的都有,里面的设置也有很多不统一的,我们做软件一般会从系统中获取一些数据,比如日期时间,环境变量的路径参数,可以用批处理文件达到我们所想要的目的,也可以用C#代码...2020-06-25
- 下面小编就为大家带来一篇浅析GridView中显示时间日期格式的问题。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-09-22
- php教程 strtotime()计算今天与指定日期之天数 $date1 = strtotime('2011-04-30'); //把日期转换成时间戳 $date2 = time(); //取当前时间的时间戳 $nowtime=strftime...2016-11-25
- perl获取日期与时间的例子,供大家学习参考...2020-06-29