如何使用moment.js獲取本周、前n周、后n周開始結(jié)束日期及動態(tài)計算周數(shù)
更新時間：2022年09月05日 10:49:02 作者：我是段段
使用了momentjs之后發(fā)現(xiàn)這個日期處理控件實在是太強大了,下面這篇文章主要給大家介紹了關(guān)于如何使用moment.js獲取本周、前n周、后n周開始結(jié)束日期及動態(tài)計算周數(shù)的相關(guān)資料,需要的朋友可以參考下
引言
項目中有一個需求：需要根據(jù)學(xué)期時間動態(tài)的計算出該學(xué)期有多少周
通過上網(wǎng)查找，找到了一個工具類moment.js
moment.js是一個JavaScript日期處理類庫，能夠?qū)崿F(xiàn)對日期的便捷操作
官網(wǎng)地址：Moment.js
環(huán)境： 需要有Node環(huán)境支持
首先需要安裝moment工具包
npm install moment
然后引入剛才下載的工具包
import moment from "moment"
因為使用的地方比較少，所以是在使用的.vue文件中引入的，如果整個項目使用比較多，可以在main.js中進行引入
一、獲取本周一和周日日期
/**
* @params
* 獲取本周周一和周日日期
*/
let start = moment().weekday(1).format('YYYY/MM/DD') //本周一
let end = moment().weekday(7).format('YYYY/MM/DD') //本周日
console.log(start, end)
// 輸出結(jié)果
2022/04/11 2022/04/17
二、獲取前 i 周的周一和周日日期
/**
* @params
* 獲取前 i 周的周一和周日日期
* 當(dāng) i=1，獲取的是上周一和上周日的日期；
* 當(dāng) i=2，獲取的是上上周一和上上周日的日期
* ...以此類推
*/
let week = 3 // 周數(shù)
let weekOfDay = new Date().getDay() // 今天星期幾
for (let i = 0; i < week; i++) {
let last_monday = '', last_sunday = '', obj = {};
last_monday = moment().subtract(weekOfDay + 7 * i - 1, 'days').format('YYYY/MM/DD');
last_sunday = moment().subtract(weekOfDay + 7 * (i - 1), 'days').format('YYYY/MM/DD');
obj.date = `${last_monday} ~ ${last_sunday}`
console.log(obj)
}
// 打印結(jié)果
{date: '2022/04/11 ~ 2022/04/17'}
{date: '2022/04/04 ~ 2022/04/10'}
{date: '2022/03/28 ~ 2022/04/03'}
三、獲取后 i 周的周一和周日日期
/**
* @params
* 獲取后 i 周的周一和周日日期
* 當(dāng) i = 1，獲取的是下周一和下周日的日期
* 當(dāng) i = 2，獲取的是下下周一和下下周日的日期
* ...以此類推
*/
let week = 3 // 周數(shù)
let weekOfDay = new Date().getDay(); // 今天星期幾
for (let i = 0; i < week; i++) {
let last_monday = '', last_sunday = '', obj = {};
last_monday = moment().add((7 - weekOfDay) + 7 * (i - 1) + 1, 'd').format('YYYY/MM/DD');
last_sunday = moment().add((7 - weekOfDay) + 7 * i, 'd').format('YYYY/MM/DD');
obj.date = `${last_monday} ~ ${last_sunday}`
console.log(obj)
}
// 打印結(jié)果
{date: '2022/04/11 ~ 2022/04/17'}
{date: '2022/04/18 ~ 2022/04/24'}
{date: '2022/04/25 ~ 2022/05/01'}
subtract：通過減去時間來改變原始的 moment；add：通過增加時間來改變原始的 moment
具體使用方法可以去官方文檔查看
四、獲取制定日期區(qū)間的周數(shù)（不跨年）
// 封裝一個函數(shù) 用來處理 第 1 2 3...周 => 第 一 二 三...周
formatTime(val) {
let arr = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
let len = val.toString().length;
if (len == 1) { // 長度為1，可以直接返回
return arr[val - 1];
} else {
let newarr = val.toString().split("");
switch (newarr[0]) {
case "1":
return `${arr[arr.length - 1]}${
newarr[1] == 0 ? "" : arr[newarr[1] - 1]
}`;
case "2":
return `${arr[newarr[0] - 1]}${arr[arr.length - 1]}${
newarr[1] == 0 ? "" : arr[newarr[1] - 1]
}`;
}
}
}
指定一個時間段，并做些簡單的處理
/**
* @params
* 不跨年計算
*/
initTime(){
let time = [
'Thu Sep 01 2022 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)',
'Sat Dec 31 2022 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)'
]
// 對起止時間進行處理
let beginTime = new Date(time[0]);
let endTime = new Date(time[1]);
// 開始時間
let bY = beginTime.getFullYear();
let bM = beginTime.getMonth() + 1;
bM = bM >= 10 ? bM : "0" + bM;
let bD = beginTime.getDate();
bD = bD >= 10 ? bD : "0" + bD;
// 結(jié)束時間
let eY = endTime.getFullYear();
let eM = endTime.getMonth() + 1;
eM = eM >= 10 ? eM : "0" + eM;
let eD = endTime.getDate();
eD = eD >= 10 ? eD : "0" + eD;
let week = moment(`${eY}-${eM}-${eD}`).week() - moment(`${bY}-${bM}-${bD}`).week() + 1; // 計算周數(shù) 用來循環(huán)
let weekOfDay = new Date(`${bY}-${bM}-${bD}`).getDay(); // 獲取當(dāng)前周幾
let arr = [] // 存放結(jié)果數(shù)據(jù)
for (let i = 0; i < week; i++) {
let next_monday = '', next_sunday = '', obj = {};
next_monday = i == 0 ? `${bM}/${bD}` : moment(`${bY}-${bM}-${bD}`).add((7 - weekOfDay) + 7 * (i - 1) + 1, 'd').format('MM/DD');
next_sunday = i == week - 1 ? `${eM}/${eD}` : moment(`${bY}-${bM}-${bD}`).add((7 - weekOfDay) + 7 * i, 'd').format('MM/DD');
obj.date = `第${this.formatTime(i+1)}周 ${next_monday} ~ ${next_sunday}`
arr.push(obj)
}
console.log(arr);
}
// 打印結(jié)果
{date: '第一周 09/01 ~ 09/04'}
{date: '第二周 09/05 ~ 09/11'}
{date: '第三周 09/12 ~ 09/18'}
{date: '第四周 09/19 ~ 09/25'}
{date: '第五周 09/26 ~ 10/02'}
{date: '第六周 10/03 ~ 10/09'}
{date: '第七周 10/10 ~ 10/16'}
{date: '第八周 10/17 ~ 10/23'}
{date: '第九周 10/24 ~ 10/30'}
{date: '第十周 10/31 ~ 11/06'}
{date: '第十一周 11/07 ~ 11/13'}
{date: '第十二周 11/14 ~ 11/20'}
{date: '第十三周 11/21 ~ 11/27'}
{date: '第十四周 11/28 ~ 12/04'}
{date: '第十五周 12/05 ~ 12/11'}
{date: '第十六周 12/12 ~ 12/18'}
{date: '第十七周 12/19 ~ 12/25'}
{date: '第十八周 12/26 ~ 12/31'}
五、第一學(xué)期還涉及到跨年的情況，處理起來相對復(fù)雜一些（跨年計算）
這是一種通用的方式
// 封裝一個方法用來獲取時間
formatYear(start, startVal, endVal, len) {
let arr = []
let yearStart = new Date(start).getDay(); // 獲取周幾
let initYearStart = yearStart; // 將周幾重新賦值
let initStart = ''; // 用來接收起始時間為周日的明天，也就是下周一個的日期
for (let i = 0; i < len; i++) {
let next_monday = '', next_sunday = '', obj = {};
if(yearStart != 0) { // 不等于0表示起始時間不是周日， 正常計算即可
next_monday = i == 0 ? startVal : moment(start).add((7 - yearStart) + 7 * (i - 1) + 1, 'd').format('MM/DD');
next_sunday = i == len - 1 ? endVal : moment(start).add((7 - yearStart) + 7 * i, 'd').format('MM/DD');
} else { // else中表示起始時間是周日
if(initYearStart == 0) { // 周日為0 表示起始時間和截止時間是同一天
next_monday = next_sunday = startVal;
initYearStart = 1; // 重新賦值為1 表示以后的從周一開始
initStart = moment(start).add(1, 'd').format('MM/DD');
start = moment(initStart);
} else {
next_monday = i == 1 ? initStart : moment(start).add((7 - initYearStart) + 7 * (i - 2) + 1, 'd').format('MM/DD');
next_sunday = i == len - 1 ? endVal : moment(start).add((7 - initYearStart) + 7 * (i - 1), 'd').format('MM/DD');
}
}
obj.date = `第${this.formatTime(i+1)}周 ${next_monday} ~ ${next_sunday}`; // 這個函數(shù)在上面有寫
arr.push(obj);
}
return arr;
}
// 這個函數(shù)用來處理時間
initTime(time) {
let beginTime = new Date(time[0]);
let endTime = new Date(time[1]);
// 開始時間
let bY = beginTime.getFullYear();
let bM = beginTime.getMonth() + 1;
bM = bM >= 10 ? bM : "0" + bM;
let bD = beginTime.getDate();
bD = bD >= 10 ? bD : "0" + bD;
// 結(jié)束時間
let eY = endTime.getFullYear();
let eM = endTime.getMonth() + 1;
eM = eM >= 10 ? eM : "0" + eM;
let eD = endTime.getDate();
eD = eD >= 10 ? eD : "0" + eD;
let arr = []
let nowDiff = 0, futureWeek = 0
if(bY != eY) {
let yearWeek = moment(`${bY}`).weeksInYear();
let nowWeek = moment(`${bY}-${bM}-${bD}`).week();
nowDiff = yearWeek - nowWeek;
futureWeek = moment(`${eY}-${eM}-${eD}`).week();
} else {
let diff = moment(`${eY}/${eM}/${eD}`).week() - moment(`${bY}-${bM}-${bD}`).week();
if(beginTime.getDay() == 0 && endTime.getDay() != 0) {
nowDiff = diff + 2;
} else if(beginTime.getDay() != 0 && endTime.getDay() == 0) {
nowDiff = diff;
} else {
nowDiff = diff + 1;
}
futureWeek = 0;
}
arr = this.formatYear(`${bY}-${bM}-${bD}`, `${bM}/${bD}`, `${eM}/${eD}`, nowDiff + futureWeek);
console.log(arr);
}
測試用例
// 一個月測試
let time = [
'Thu Apr 14 2022 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)',
'Sat May 14 2022 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)'
]
initTime(time)
{date: '第一周 04/14 ~ 04/17'}
{date: '第二周 04/18 ~ 04/24'}
{date: '第三周 04/25 ~ 05/01'}
{date: '第四周 05/02 ~ 05/08'}
{date: '第五周 05/09 ~ 05/14'}
// 三個月測試
let time = [
'Thu Apr 14 2022 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)',
'Thu Jul 14 2022 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)'
]
{date: '第一周 04/14 ~ 04/17'}
{date: '第二周 04/18 ~ 04/24'}
{date: '第三周 04/25 ~ 05/01'}
{date: '第四周 05/02 ~ 05/08'}
{date: '第五周 05/09 ~ 05/15'}
{date: '第六周 05/16 ~ 05/22'}
{date: '第七周 05/23 ~ 05/29'}
{date: '第八周 05/30 ~ 06/05'}
{date: '第九周 06/06 ~ 06/12'}
{date: '第十周 06/13 ~ 06/19'}
{date: '第十一周 06/20 ~ 06/26'}
{date: '第十二周 06/27 ~ 07/03'}
{date: '第十三周 07/04 ~ 07/10'}
{date: '第十四周 07/11 ~ 07/14'}
// 跨年測試
{date: '第一周 12/01 ~ 12/04'}
{date: '第二周 12/05 ~ 12/11'}
{date: '第三周 12/12 ~ 12/18'}
{date: '第四周 12/19 ~ 12/25'}
{date: '第五周 12/26 ~ 01/01'}
{date: '第六周 01/02 ~ 01/08'}
{date: '第七周 01/09 ~ 01/15'}
{date: '第八周 01/16 ~ 01/22'}
{date: '第九周 01/23 ~ 01/31'}
// element-ui 日期選擇器默認周日為第一天 且 getDay()值為0 （以2022年為例）
// 開始時間為周日 結(jié)束時間為下周
let time = ['2022-04-10', '2022-04-17']
{date: '第一周 04/10 ~ 04/10'}
{date: '第二周 04/11 ~ 04/17'}
// 開始時間為周日 結(jié)束時間為周日測試
let time = ['2022-04-10', '2022-05-01']
{date: '第一周 04/10 ~ 04/10'}
{date: '第二周 04/11 ~ 04/17'}
{date: '第三周 04/18 ~ 04/24'}
{date: '第四周 04/25 ~ 05/01'}
// 開始時間為周日 結(jié)束時間為隔周任意
let time = ['2022-04-10', '2022-04-29']
{date: '第一周 04/10 ~ 04/10'}
{date: '第二周 04/11 ~ 04/17'}
{date: '第三周 04/18 ~ 04/24'}
{date: '第四周 04/25 ~ 04/29'}
// 開始時間為周日 結(jié)束時間為隔周周一
let time = ['2022/04/10', '2022/04/18']
{date: '第一周 04/10 ~ 04/10'}
{date: '第二周 04/11 ~ 04/17'}
{date: '第三周 04/18 ~ 04/18'}
第五種方法基本處理了目前為止遇到的問題，更多詳細用法可以去moment.js官網(wǎng)查看~
總結(jié)
到此這篇關(guān)于如何使用moment.js獲取本周、前n周、后n周開始結(jié)束日期及動態(tài)計算周數(shù)的文章就介紹到這了,更多相關(guān)moment動態(tài)計算周數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JSON.stringify轉(zhuǎn)換JSON時日期時間不準(zhǔn)確的解決方法
這篇文章主要介紹了JSON.stringify轉(zhuǎn)換JSON時日期時間不準(zhǔn)確的解決方法,即JSON數(shù)據(jù)中包含日期對象時,在轉(zhuǎn)換時會轉(zhuǎn)換成國際時間,而不是中國的時區(qū),需要的朋友可以參考下2014-08-08
rpx是微信小程序新推出的一個單位，按官方的定義，rpx可以根據(jù)屏幕寬度進行自適應(yīng)，在rpx出現(xiàn)之前，web頁面的自適應(yīng)布局已經(jīng)有了多種解決方案，為什么微信還搗鼓出新的rpx單位？下面通過這篇文章來一起看看吧。2016-12-12
這篇文章主要為大家詳細介紹了微信小程序用canvas實現(xiàn)電子簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
uniapp使用百度地圖的保姆式教學(xué)(適合初學(xué)者!)
公司項目中有地圖展示和定位功能,所以下面這篇文章主要給大家介紹了關(guān)于uniapp使用百度地圖的保姆式教學(xué),文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
基于Taro的微信小程序模板消息-獲取formId功能模塊封裝實踐
這篇文章主要介紹了基于Taro的微信小程序模板消息-獲取formId功能模塊封裝實踐，小程序提供了一種能力-模板消息，基于微信的通知渠道，我們?yōu)殚_發(fā)者提供了可以高效觸達用戶的模板消息能力，以便實現(xiàn)服務(wù)的閉環(huán)并提供更佳的體驗,需要的朋友可以參考下2019-07-07
WebGL利用FBO完成立方體貼圖效果完整實例(附demo源碼下載)
這篇文章主要介紹了WebGL利用FBO完成立方體貼圖效果的方法,以完整實例形式分析了WebGL實現(xiàn)立方體貼圖的具體步驟與相關(guān)技巧,并附帶了demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
js+css完成網(wǎng)站的經(jīng)典效果，一般用于會員排行榜中，會員信息的介紹，包括照片等。2010-06-06
這篇文章主要為大家詳細介紹了Bootstrap實現(xiàn)模態(tài)框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
React Hook 是 React 16.8 版本引入的一項新特性，它能夠讓函數(shù)組件擁有類組件中的狀態(tài)(state)和生命周期方法(lifecycle methods)等功能。Vue 3.x 開始引入了 Hooks API，用于在函數(shù)式組件中實現(xiàn)狀態(tài)和生命周期的管理。本文介紹的非常詳細，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了微信小程序循環(huán)動畫效果的實現(xiàn)方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07