如何使用moment.js獲取本周、前n周、后n周開始結(jié)束日期及動(dòng)態(tài)計(jì)算周數(shù)
更新時(shí)間：2022年09月05日 10:49:02 作者：我是段段
使用了momentjs之后發(fā)現(xiàn)這個(gè)日期處理控件實(shí)在是太強(qiáng)大了,下面這篇文章主要給大家介紹了關(guān)于如何使用moment.js獲取本周、前n周、后n周開始結(jié)束日期及動(dòng)態(tài)計(jì)算周數(shù)的相關(guān)資料,需要的朋友可以參考下
引言
項(xiàng)目中有一個(gè)需求：需要根據(jù)學(xué)期時(shí)間動(dòng)態(tài)的計(jì)算出該學(xué)期有多少周
通過上網(wǎng)查找，找到了一個(gè)工具類moment.js
moment.js是一個(gè)JavaScript日期處理類庫(kù)，能夠?qū)崿F(xiàn)對(duì)日期的便捷操作
官網(wǎng)地址：Moment.js
環(huán)境： 需要有Node環(huán)境支持
首先需要安裝moment工具包
npm install moment
然后引入剛才下載的工具包
import moment from "moment"
因?yàn)槭褂玫牡胤奖容^少，所以是在使用的.vue文件中引入的，如果整個(gè)項(xiàng)目使用比較多，可以在main.js中進(jìn)行引入
一、獲取本周一和周日日期
/**
* @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：通過減去時(shí)間來改變?cè)嫉?moment；add：通過增加時(shí)間來改變?cè)嫉?moment
具體使用方法可以去官方文檔查看
四、獲取制定日期區(qū)間的周數(shù)（不跨年）
// 封裝一個(gè)函數(shù) 用來處理 第 1 2 3...周 => 第 一 二 三...周
formatTime(val) {
let arr = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
let len = val.toString().length;
if (len == 1) { // 長(zhǎng)度為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]
}`;
}
}
}
指定一個(gè)時(shí)間段，并做些簡(jiǎn)單的處理
/**
* @params
* 不跨年計(jì)算
*/
initTime(){
let time = [
'Thu Sep 01 2022 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)',
'Sat Dec 31 2022 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)'
]
// 對(duì)起止時(shí)間進(jìn)行處理
let beginTime = new Date(time[0]);
let endTime = new Date(time[1]);
// 開始時(shí)間
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é)束時(shí)間
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; // 計(jì)算周數(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é)期還涉及到跨年的情況，處理起來相對(duì)復(fù)雜一些（跨年計(jì)算）
這是一種通用的方式
// 封裝一個(gè)方法用來獲取時(shí)間
formatYear(start, startVal, endVal, len) {
let arr = []
let yearStart = new Date(start).getDay(); // 獲取周幾
let initYearStart = yearStart; // 將周幾重新賦值
let initStart = ''; // 用來接收起始時(shí)間為周日的明天，也就是下周一個(gè)的日期
for (let i = 0; i < len; i++) {
let next_monday = '', next_sunday = '', obj = {};
if(yearStart != 0) { // 不等于0表示起始時(shí)間不是周日， 正常計(jì)算即可
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中表示起始時(shí)間是周日
if(initYearStart == 0) { // 周日為0 表示起始時(shí)間和截止時(shí)間是同一天
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}`; // 這個(gè)函數(shù)在上面有寫
arr.push(obj);
}
return arr;
}
// 這個(gè)函數(shù)用來處理時(shí)間
initTime(time) {
let beginTime = new Date(time[0]);
let endTime = new Date(time[1]);
// 開始時(shí)間
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é)束時(shí)間
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);
}
測(cè)試用例
// 一個(gè)月測(cè)試
let time = [
'Thu Apr 14 2022 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)',
'Sat May 14 2022 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)'
]
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'}
// 三個(gè)月測(cè)試
let time = [
'Thu Apr 14 2022 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)',
'Thu Jul 14 2022 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)'
]
{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'}
// 跨年測(cè)試
{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 日期選擇器默認(rèn)周日為第一天 且 getDay()值為0 （以2022年為例）
// 開始時(shí)間為周日 結(jié)束時(shí)間為下周
let time = ['2022-04-10', '2022-04-17']
{date: '第一周 04/10 ~ 04/10'}
{date: '第二周 04/11 ~ 04/17'}
// 開始時(shí)間為周日 結(jié)束時(shí)間為周日測(cè)試
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'}
// 開始時(shí)間為周日 結(jié)束時(shí)間為隔周任意
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'}
// 開始時(shí)間為周日 結(jié)束時(shí)間為隔周周一
let time = ['2022/04/10', '2022/04/18']
{date: '第一周 04/10 ~ 04/10'}
{date: '第二周 04/11 ~ 04/17'}
{date: '第三周 04/18 ~ 04/18'}
第五種方法基本處理了目前為止遇到的問題，更多詳細(xì)用法可以去moment.js官網(wǎng)查看~
總結(jié)
到此這篇關(guān)于如何使用moment.js獲取本周、前n周、后n周開始結(jié)束日期及動(dòng)態(tài)計(jì)算周數(shù)的文章就介紹到這了,更多相關(guān)moment動(dòng)態(tài)計(jì)算周數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
如何利用JS將手機(jī)號(hào)中間四位變成*號(hào)
這篇文章主要介紹了如何利用JS將手機(jī)號(hào)中間四位變成*號(hào),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
JavaScrip簡(jiǎn)單數(shù)據(jù)類型隱式轉(zhuǎn)換的實(shí)現(xiàn)
本文主要介紹了JavaScrip簡(jiǎn)單數(shù)據(jù)類型隱式轉(zhuǎn)換的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
原生javascript實(shí)現(xiàn)類似vue的數(shù)據(jù)綁定功能示例【觀察者模式】
這篇文章主要介紹了原生javascript實(shí)現(xiàn)類似vue的數(shù)據(jù)綁定功能,結(jié)合實(shí)例形式分析了JavaScript基于觀察者模式實(shí)現(xiàn)類似vue的數(shù)據(jù)綁定相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
關(guān)于JSON解析的實(shí)現(xiàn)過程解析
這篇文章主要介紹了關(guān)于JSON解析的實(shí)現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
微信小程序基于數(shù)據(jù)庫(kù)時(shí)間實(shí)現(xiàn)商品倒計(jì)時(shí)功能(可重用代碼)
這篇文章主要介紹了微信小程序基于數(shù)據(jù)庫(kù)時(shí)間實(shí)現(xiàn)商品倒計(jì)時(shí)功能(可重用代碼),代碼很完整，拿來就可以使用，現(xiàn)在我把完整的代碼分享給大家，需要的朋友可以參考下2022-07-07
群里有個(gè)出了一道有趣的題目，分享出來讓大家看看2012-02-02
javascript級(jí)聯(lián)下拉列表實(shí)例代碼(自寫)
javascript下拉菜單想必大家在瀏覽網(wǎng)頁(yè)的時(shí)候都會(huì)看到吧，已不是那么陌生了，本文介紹使用javascript實(shí)現(xiàn)級(jí)聯(lián)下拉列表實(shí)例，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-05-05
這篇文章主要介紹了小程序中為什么使用var that=this的相關(guān)知識(shí)，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
需正確使用new和spring，注意兩者的區(qū)別2009-03-03
編寫JS的過程中,我們經(jīng)常用到對(duì)象,也會(huì)用到對(duì)象中的屬性,下面這篇文章主要給大家介紹了關(guān)于JS判斷對(duì)象屬性是否存在的五種方案,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01