基于Day.js更優(yōu)雅的處理JavaScript中的日期
今天我推薦給大家一個庫 Day.js,它能夠幫助我們處理JavaScript中的日期,因?yàn)镴avaScript中的日期實(shí)在是太難用了。在做業(yè)務(wù)開發(fā)時完全無法使用,需要自己去封裝各種函數(shù)。
為什么使用day.js
首先,使用day.js能夠幫助我們更簡單的處理JavaScript中的日期和時間。
在JavaScript中處理時間的庫你可能聽說很多,比如Moment,但都2021年了,其實(shí)是非常不推薦使用moment.js的,因?yàn)樽鳛槿掌谔幚砉ぞ撸^于的笨重,day.js是更現(xiàn)代并且更輕量化,更加容易擴(kuò)展的一個庫。
Moment.js
Day.js
它非常輕量化,因?yàn)樗梢岳肨reeShaking,并且通過插件的方式來進(jìn)行擴(kuò)展,我們可以根據(jù)自己的需求去引入插件,所以我們最后只會引入我們需要的東西。
沒有day.js我們怎么辦
在原生的JavaScript中,我們要獲取當(dāng)前的日期要這樣
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中我們只需這樣,當(dāng)然不止這樣,還支持很多功能。 import dayjs from "dayjs"; const curDate = dayjs().format('YYYY-MM-DD'); console.log(curDate) // 輸出: 2021-09-17
Day.js 例子
現(xiàn)在我們來看一些實(shí)用、有趣的例子,與原生API相比,它更加簡單,而且可讀性更強(qiáng)。
1. 獲取兩個日期相差的天數(shù)
import dayjs from "dayjs"; // 第二個參數(shù)指定為'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. 獲取輸入日期月份的天數(shù)
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
使用插件來擴(kuò)展功能
1. RelativeTime
獲取指定時間到現(xiàn)在的時間差。
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
獲取指定日期是當(dāng)年的第幾周
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
獲取數(shù)組中最大的日期,或者最小的日期
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
檢查指定日期是否在指定的日期范圍內(nèi)
import dayjs from "dayjs"; import isBetween from "dayjs/plugin/isBetween"; dayjs.extend(isBetween); // 使用日為顆粒度進(jìn)行比較 dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "day"); // 輸出: true // 使用年為顆粒度進(jìn)行比較 dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "year"); // 輸出: false
到此這篇關(guān)于基于Day.js更優(yōu)雅的處理JavaScript中的日期的文章就介紹到這了,更多相關(guān)Day.js處理日期內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js使用onmousemove和onmouseout獲取鼠標(biāo)坐標(biāo)的方法
這篇文章主要介紹了js使用onmousemove和onmouseout獲取鼠標(biāo)坐標(biāo)的方法,涉及javascript操作鼠標(biāo)事件的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03Layui數(shù)據(jù)表格判斷編輯輸入的值,是否為我需要的類型詳解
今天小編就為大家分享一篇Layui數(shù)據(jù)表格判斷編輯輸入的值,是否為我需要的類型詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10layui實(shí)現(xiàn)form表單同時提交數(shù)據(jù)和文件的代碼
今天小編就為大家分享一篇layui實(shí)現(xiàn)form表單同時提交數(shù)據(jù)和文件的代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10JS中獲取函數(shù)調(diào)用鏈所有參數(shù)的方法
這篇文章主要介紹了JS中獲取函數(shù)調(diào)用鏈所有參數(shù)的方法,本文直接給出代碼示例,需要的朋友可以參考下2015-05-05基于Three.js實(shí)現(xiàn)酷炫3D地圖效果
這篇文章主要為大家詳細(xì)介紹了如何利用Three.js實(shí)現(xiàn)酷炫3D地圖的效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以嘗試一下2022-10-10javascript中Date()函數(shù)在各瀏覽器中的顯示效果
本文給大家分享的是javascript中Date()函數(shù)在各瀏覽器中的顯示效果,由于各大瀏覽器的兼容性問題,本文做了這個測試,希望有需要的小伙伴可以少走些彎路2015-06-06學(xué)前端,css與javascript重難點(diǎn)淺析
JavaScript是一種屬于網(wǎng)絡(luò)的腳本語言,已經(jīng)被廣泛用于Web應(yīng)用開發(fā),CSS(Cascading Style Sheet)層疊樣式表單,今天給大家分享css與javascript重難點(diǎn),感興趣的朋友一起看看吧2020-06-06