提升系列:17.获取格式化时间区间-4-1

92 阅读4分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 13天,点击查看活动详情

上一次掘金的征文活动,准确来说,应该是去年的最后一次掘金官方的征文活动,我没有参加那一次征文活动。距离上一次征文,好像有两三个月了,感觉时间过得有点漫长了,都快要忘记掘金的征文活动了。

现在掘金推出了新的一年的征文活动-掘金日新计划 · 2 月更文挑战,又要开始新的一年,新的一轮的征文挑战了。

征文挑战已经开始了,而我即将要参与这次征文活动,参与挑战,挑战自己。

提升系列

提升系列,我主要是想写一些平时工作上面,自己会用到的一些好的技巧或者方法。当然,这些技巧和方法是针对我自己的。

除此之外,还可能会写一些解决难点的方法。比如,遇到了某个难点,要通过什么方法来解决它?

正如它的名字一样--提升,通过学习一些好的技巧、方法,或者解决一些难题、难点,来提升我们的能力。

出这个提升系列,一方面,是提升自己的开发能力;另一方面,也希望这个提升系列,可以帮助到部分人,提升他们的开发能力。

在这个系列里,我能想到的或者实现方法,不一定是最好的。欢迎大家参与讨论。

前言

在前面几篇文章提升系列:获取格式化时间区间里,主要是通过一个小示例,来演示怎么通过momentjs这个第三方库来实现获取前7天时间的功能。通过该示例,我们可以看到,使用了第三方库后,实现获取前面7天时间的功能就非常容易了。

接下来,我们介绍一下另外一个第三方库-dayjs。看下怎么使用dayjs来实现获取前面7天时间的功能。

dayjs

Day.js是一个极简的JavaScript库,可以为现代浏览器解析、验证、操作和显示日期和时间

这是dayjs官网上面的介绍,可以使用dayjs来进行日期、时间方面相关的操作。

实现效果

我们在项目开发的时候,可能会遇到这种需求,需要显示今天到前面几天这个时间区间。如果你不好想象或者理解的话,我给你找下展示示例。随便浏览一下网页,没找到我想要说的需求效果。我想着,一些组件库里说不定就有很好的示例。我到elementui组件库里查看一下,发现它的日期时间选择器就很好地展示了我想要展示的效果。

0001.png

就是要实现类似的效果,显示一个时间区间。

示例

创建一个index.html文件,我们的示例代码,将在这个文件里完成

要想使用dayjs,需要先安装dayjs依赖。不过由于我这里不是在工程或者仓库里面开发,而是在一个html文件里使用。

所以我采用的是通过cdn的方式来引入dayjs。

<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.5/dayjs.min.js"></script>

引入完成后,我们就可以使用dayjs了。

在dayjs官网上面,我们可以查看到有一个subtract方法,对subtract方法的介绍

返回减去一定时间的复制的 Day.js 对象

我们可以利用dayjs的subtract方法,来获取前面几天的时间。

let lastDay = dayjs().subtract(7, "day").date()
console.log(lastDay)

先是使用dayjs()方法,来获取当前时间实例对象。然后调用它的subtract方法,减去7天时间。再利用实例对象的date方法,来获取时间所在的天数。

我们到浏览器控制台查看一下。

0002.png

打印结果是22,我们现在是29号,前面7天,就是22号。结果验证正确。

小结

本小节,主要是讲解了怎么使用dayjs第三方依赖库,快速获取前面7天的时间。在示例代码里,我们可以看到,使用了dayjs第三方依赖库,代码是非常简洁的,比我们自己写的代码会少很多,以及更简洁。

如果你想要实现获取前面几天时间功能的话,除了前面介绍的方法,自己实现或者使用momentjs来实现。

现在,我们又多了一种新的方法,可以使用一下dayjs这个第三方依赖库来实现了。

最后,放上自己比较喜欢的一句诗句:

千淘万漉虽辛苦,吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》