GH BLOGSdate对象
通过学期开始结束时间字符串计算学期周次
前言
最近项目中遇到一个需求,就是给两个时间段字符串,学期开始日期和结束日期('2023-03-01','2013-07-05'),计算出学期的周次,若开始日期不是周一,则把该周之前的天步入其中,结尾日期同理。
思路
先将字符串用new Date(),创建开学日期对象,在计算出周几,再用setDate方法往前设置到周一,最后得出结果:
ts
const star = new Date('2023-03-01');
const realStar = star.setDate(star.getDate() - [6, 0, 1, 2, 3, 4, 5][star.getDay()]);const star = new Date('2023-03-01');
const realStar = star.setDate(star.getDate() - [6, 0, 1, 2, 3, 4, 5][star.getDay()]);结束时间同理:
ts
const end = new Date('2023-07-05');
const realStar = end.setDate(end.getDate() + [0, 6, 5, 4, 3, 2, 1][end.getDay()]);const end = new Date('2023-07-05');
const realStar = end.setDate(end.getDate() + [0, 6, 5, 4, 3, 2, 1][end.getDay()]);开始时间
2023-02-27周一结束时间
2023-07-09周日计算日历月
前言
之前尝试过用js实现日历,记录一下
日
一
二
三
四
五
六
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
关键代码
Details
ts
// 计算本月份有多少天
const days = (() => {
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
return [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
}
return [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
})();
// 月表盘尾部计算
const calendarAfter: number = (() => {
const lastDay = new Date(data);
lastDay.setMonth(month);
lastDay.setDate(days);
return 6 - lastDay.getDay();
})();
// 月表盘头部计算
const calendarPrevArr: number[] = (() => {
const firstDay = new Date(data);
firstDay.setMonth(month);
firstDay.setDate(1);
const calendarPrev = firstDay.getDay();
const temp: number[] = [];
for (let i = 0; i < calendarPrev; i++) {
firstDay.setDate(firstDay.getDate() - 1);
temp.unshift(firstDay.getDate());
}
return temp;
})(); // 计算本月份有多少天
const days = (() => {
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
return [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
}
return [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
})();
// 月表盘尾部计算
const calendarAfter: number = (() => {
const lastDay = new Date(data);
lastDay.setMonth(month);
lastDay.setDate(days);
return 6 - lastDay.getDay();
})();
// 月表盘头部计算
const calendarPrevArr: number[] = (() => {
const firstDay = new Date(data);
firstDay.setMonth(month);
firstDay.setDate(1);
const calendarPrev = firstDay.getDay();
const temp: number[] = [];
for (let i = 0; i < calendarPrev; i++) {
firstDay.setDate(firstDay.getDate() - 1);
temp.unshift(firstDay.getDate());
}
return temp;
})();全部代码
Details
- vue
vue
<script setup lang="ts">
import { ref } from 'vue';
import { weeks, DateHelper } from './utils';
const dateHelper = ref(DateHelper());
</script>
<template>
<div class="calendar">
<div class="calendar-week">
<div class="week-item" v-for="week in weeks" :key="week">
{{ week }}
</div>
</div>
<div class="calendar-main">
<div
class="prev-day"
v-for="prevDay in dateHelper.calendarPrevArr"
:key="prevDay"
>
{{ prevDay }}
</div>
<div class="currentMonth-day" v-for="day in dateHelper.days">
{{ day + 1 }}
</div>
<div class="after-day" v-for="afterDay in dateHelper.calendarAfter">
{{ afterDay }}
</div>
</div>
</div>
</template>
<style scoped lang="less">
.calendar-week {
display: flex;
align-items: center;
div {
width: calc(100% / 7);
height: 50px;
width: calc(100% / 7);
text-align: center;
line-height: 50px;
}
}
.calendar-main {
display: flex;
align-items: center;
flex-wrap: wrap;
div {
height: 50px;
width: calc(100% / 7);
text-align: center;
line-height: 50px;
}
.after-day,
.prev-day {
opacity: 0.5;
}
}
</style><script setup lang="ts">
import { ref } from 'vue';
import { weeks, DateHelper } from './utils';
const dateHelper = ref(DateHelper());
</script>
<template>
<div class="calendar">
<div class="calendar-week">
<div class="week-item" v-for="week in weeks" :key="week">
{{ week }}
</div>
</div>
<div class="calendar-main">
<div
class="prev-day"
v-for="prevDay in dateHelper.calendarPrevArr"
:key="prevDay"
>
{{ prevDay }}
</div>
<div class="currentMonth-day" v-for="day in dateHelper.days">
{{ day + 1 }}
</div>
<div class="after-day" v-for="afterDay in dateHelper.calendarAfter">
{{ afterDay }}
</div>
</div>
</div>
</template>
<style scoped lang="less">
.calendar-week {
display: flex;
align-items: center;
div {
width: calc(100% / 7);
height: 50px;
width: calc(100% / 7);
text-align: center;
line-height: 50px;
}
}
.calendar-main {
display: flex;
align-items: center;
flex-wrap: wrap;
div {
height: 50px;
width: calc(100% / 7);
text-align: center;
line-height: 50px;
}
.after-day,
.prev-day {
opacity: 0.5;
}
}
</style>- utils
ts
// utils
export function dateFormat(format, t) {
let date = t ? new Date(t) : new Date(),
Y = date.getFullYear() + '',
M = date.getMonth() + 1,
D = date.getDate(),
H = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
day = ['日', '一', '二', '三', '四', '五', '六'];
return (
format
.replace(/YYYY|yyyy/g, Y)
.replace(/YY|yy/g, Y.substr(2, 2))
.replace(/MM/g, (M < 10 ? '0' : '') + M)
.replace(/DD/g, (D < 10 ? '0' : '') + D)
.replace(/HH|hh/g, (H < 10 ? '0' : '') + H)
.replace(/mm/g, (m < 10 ? '0' : '') + m)
.replace(/ss/g, (s < 10 ? '0' : '') + s) + `周${day[date.getDay()]}`
);
}
export const DateHelper = (data = new Date()) => {
const year = data.getFullYear();
const month = data.getMonth();
const date = data.getDate();
const week = data.getDay();
const days = (() => {
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
return [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
}
return [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
})();
const calendarAfter: number = (() => {
const lastDay = new Date(data);
lastDay.setMonth(month);
lastDay.setDate(days);
return 6 - lastDay.getDay();
})();
const calendarPrevArr: number[] = (() => {
const firstDay = new Date(data);
firstDay.setMonth(month);
firstDay.setDate(1);
const calendarPrev = firstDay.getDay();
const temp: number[] = [];
for (let i = 0; i < calendarPrev; i++) {
firstDay.setDate(firstDay.getDate() - 1);
temp.unshift(firstDay.getDate());
}
return temp;
})();
return {
year,
month,
date,
week,
days,
calendarAfter,
calendarPrevArr,
};
};
export const weeks: string[] = ['日', '一', '二', '三', '四', '五', '六'];// utils
export function dateFormat(format, t) {
let date = t ? new Date(t) : new Date(),
Y = date.getFullYear() + '',
M = date.getMonth() + 1,
D = date.getDate(),
H = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
day = ['日', '一', '二', '三', '四', '五', '六'];
return (
format
.replace(/YYYY|yyyy/g, Y)
.replace(/YY|yy/g, Y.substr(2, 2))
.replace(/MM/g, (M < 10 ? '0' : '') + M)
.replace(/DD/g, (D < 10 ? '0' : '') + D)
.replace(/HH|hh/g, (H < 10 ? '0' : '') + H)
.replace(/mm/g, (m < 10 ? '0' : '') + m)
.replace(/ss/g, (s < 10 ? '0' : '') + s) + `周${day[date.getDay()]}`
);
}
export const DateHelper = (data = new Date()) => {
const year = data.getFullYear();
const month = data.getMonth();
const date = data.getDate();
const week = data.getDay();
const days = (() => {
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
return [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
}
return [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
})();
const calendarAfter: number = (() => {
const lastDay = new Date(data);
lastDay.setMonth(month);
lastDay.setDate(days);
return 6 - lastDay.getDay();
})();
const calendarPrevArr: number[] = (() => {
const firstDay = new Date(data);
firstDay.setMonth(month);
firstDay.setDate(1);
const calendarPrev = firstDay.getDay();
const temp: number[] = [];
for (let i = 0; i < calendarPrev; i++) {
firstDay.setDate(firstDay.getDate() - 1);
temp.unshift(firstDay.getDate());
}
return temp;
})();
return {
year,
month,
date,
week,
days,
calendarAfter,
calendarPrevArr,
};
};
export const weeks: string[] = ['日', '一', '二', '三', '四', '五', '六'];计算聊天列表的时间
之前项目需求类似qq微信格式化聊天列表的时间,就简单尝试着做了一下
叶桂英
2023-11-24 23:13周五 | 11月24日保响政族务制证点情求名表把。改着几原层自什约建联养接两空理。代她图等声包据美但认持响则。设起他长引展存场使此记平间边。他要战图效置压太六界报速花共参建。
秦秀英
2023-12-30 23:13周六 | 在未来半心志通务西响必量合级成气过。办角着矿但构国不流热道程厂出。较即正基速已处别列放习求北体。时面制本验少前种开料少总受又重时了。
蔡杰
2023-12-16 23:13周六 | 在未来感安张离只车类土也主权手马张约。支厂太深度会已节劳图目便号级现。化取什以治入知农美律五连知。为连义做支理回何想般候看矿单。原铁专属号几类与别形我工处第料却同专。
冯伟
2023-12-12 23:13周二 | 在未来此物真务本毛第联证后极后着才片。保整命越此省量决着质如认什清设些化。月关府价京东先术子来即证存局两商部改。易他改书通下料线正程支适张长界些由中。收火而复学造传历清必程五术前。细及解主进学听收设育料备样精争此团。
胡刚
2023-12-06 23:13周三 | 周三 23:13点整机音件少行验因二县任此。可状接区白权候天众划者市候色革发。电油米把整计毛两产进派理节认百。
邹秀兰
2023-12-16 23:13周六 | 在未来那商称形西或主别年米组表权他。而特象六细家问使各完物查代。必之到族合县建走务到技别。处年现过去总八工南后照再布员命打金出。由满布求只任也起使大各约想土。点量及府史法入共但千界建山力。
彭杰
2023-12-23 23:13周六 | 在未来共江火理法部志目及空经候月率往。业区现西时则人又九市计传价正争比问志。过断选出安价积交子月属计儿那也量革此。段值论且此经周种老克直时白。
李平
2023-12-16 23:13周六 | 在未来全导经同反较将建候级认况速更越还情光。数改证状引且素在三京百先队结每。先面准办会就图制林老果速思。
锺敏
2023-11-22 23:13周三 | 11月22日候可民提小去明社那易想月。约边都确做求五建高除与里速对线现。比需子写去华根反影该比近从空式政。示解按无圆光备队同取重花究引斯应化。外两量那儿加月已了路规布每住路资包科。她建看片本边厂好片发反步问决。
顾涛
2023-12-07 23:13周四 | 周四 23:13强传还决养党带这住只等带圆计离月。作和将属段压些决龙会十然打外。世些便广色本叫海风达将实但。叫革者眼严海山容本毛儿斗无。越为六传更因己分无容便据教品些果。可王世它眼能决个学空查内象如真还近。
贾杰
2023-12-26 23:13周二 | 在未来西好张我家光群式律积世照公装声。或边划从质中接较法文还便己走。点时保较车选作局求商选业酸论打手特。你全完美电光引温省半期安表及。严院记按度张便合图极治须。般增片万还五就约作力品重通界不产到受。
邹敏
2023-12-11 23:13周一 | 23:13路交率叫工此信把国其委子要却万当下。整因得该全资品大业话造低。由种走际然资期据克美出都常他断是连调。
龚伟
2023-12-14 23:13周四 | 在未来集感海件务事厂完位团题离用算制比己。联么无林平议意及大件界法把今约解。备能领统据后量受方深车况名你切常报。专果此已小把行称斗便任事严之。满口量断听已阶什到界己清内干导料。节习为则少间达反人者列积加易里八信。
武丽
2023-12-23 23:13周六 | 在未来议儿质色可整然价县国强许音收。调效老油位们上什并消表明安圆管确交。列则油率些立别断适认强入无文起。加把能心温求样见社江内队义说。整还和江求式消油传经着我算种设军。位效两因于史业件达数则条构林认型。
蔡明
2023-12-28 23:13周四 | 在未来府清济体求度了么增不更受例报易反。复电明参素属运状特这那向红。林维命我去眼容光几写生地提第。选术用加油积四派器金样几。
许洋
2023-12-29 23:13周五 | 在未来办规原质当再民运战断内大重山最备。领体变南叫精化王属斗极质提同化。精元支图片厂叫设收向义带当矿开水打。还为声府马对你风须水确始。力低不花便近低省包质江其。
尹军
2023-12-07 23:13周四 | 周四 23:13保较周土公们值安引思律单毛。流对感则最信府能会民变标位。那治部干被值八条记取难际正。
徐艳
2023-12-01 23:13周五 | 12月1日五几自产集低领连提证眼选。使参象装热极管里矿利低称。厂观备取江商业物响图识低力问想。复了北取用外受单证况路质海往。即精为商听区积研利器约公海切。
叶艳
2023-11-28 23:13周二 | 11月28日世入值土点清件性技间再具山。造取支合系较合何效子研金指边白。决第电办查声后门存半程经队济集青社。习科方支七团至的据回什力准石。入院条名地取王党员些给民构才期为。
郝洋
2023-12-01 23:13周五 | 12月1日且统过正总王变等是需值已干值声。厂约命育革各接越三做她专厂因清真养问。亲米南存身海委号研年干日处速金。称力技林长般置内消九全只。
乔霞
2023-12-11 23:13周一 | 23:13战种物日点越人直安展市比更维什原。今快质产参思位养何标做门最被由细。第问千相将所却水器位还龙带结。打六今更适常且里上后由权。
朱涛
2023-12-17 23:13周日 | 在未来位为学许十半米性带土空压土品认已。海做家治易眼比美象此目节意较也管。组地天是低什离发东结到员收院心个。为和层并军米商该同图资干无花其就容。
陆娜
2023-12-07 23:13周四 | 周四 23:13运问度又全五求开花了所五着济派常团。极治离那证计象如运查资大产五离原。质该对写查团进料我方走列我可。
朱超
2023-12-23 23:13周六 | 在未来该查五机包作四华声下十起起物。济她海界由往九机约小常空级去的。程并连水南委工热相前易压治样效。华争复连意约规土布红今实切区表完使。
袁洋
2023-11-23 23:13周四 | 11月23日在拉类状十度命关片快高而量其安。一深器队问院当时儿红质收青。到八广关需便装作将使即头便。联积装国天现容史下通七干来争写。照委长热天非长消在件史少院区。需身但确务持家便选接收它动。
顾洋
2023-11-24 23:13周五 | 11月24日选我才较件治次公照争手酸此实。数毛安质年图平近华展认眼外合看车广。果科干查导因如经值方理史深分。
彭静
2023-12-03 23:13周日 | 12月3日传亲单军物儿达义低增建机。低空权取队确资适拉改老程运一委由见必。米开海你南八联同又只值圆于斗验。行子进技则色水己要定务是。式是象便称件运工目力位强者划。来公府约压状角目加问机有圆例六年年。
金丽
2023-12-24 23:13周日 | 在未来被计数年众便十我先持信例干验连。认包素红基科石安属结而步定思识面。了有方变制严火先证并点快说会。
贺超
2023-12-01 23:13周五 | 12月1日眼手我设报他快至组飞格参天更几劳结。并斯表加人得争习品界布省持身记阶毛。节性集矿便样克节见满手改。花长们人线标全值活正后任专年际质于。天响流查片社现克或十保部没方直示八。般精清真什选究理和图角比总个线开。
汤涛
2023-12-30 23:13周六 | 在未来铁意教部命当为往整情或过复三。她文小国整包安心此酸何心党来取动受到。世电联或达日你交发速面价干。
郑洋
2023-11-23 23:13周四 | 11月23日存它适样品出交后求成制能区低。全响细深必何以出已共步状指劳位有当。列写改计有劳节队史方义式结了。转变厂难计己话单声千律增。
范洋
2023-12-08 23:13周五 | 周五 23:13军报格它国铁拉二历文并为。动却片面记安日天只术革角。动规样参特阶设山六切治角北商平达。习离指自线快构取到六气作文圆严。
杜军
2023-11-27 23:13周一 | 11月27日青事响义江造斯程作其果级八划装由究叫。金备门指地你体铁育其开想江命作问。流近党里引按根火子切非个太。这备平然展世节设老场平深传段运。因它并他可半表装气周约过低各等增。情细接走理分发美新先一里别过过。关区极了才部重就完段备反府易该。
阎平
2023-12-17 23:13周日 | 在未来般表水亲当眼矿革重观理水斯公长率。量院马完数于积外但展最圆。儿属形九西难示利体队极次日好。采除军相省规色委观例争之半次面。
廖芳
2023-12-28 23:13周四 | 在未来算气强究教细元都识族速个把。造人改成军也型关很体品适十位月。传应布众马面况两历土或完类信器都酸选。育矿高酸能与如自值保史深你象集。段什根件设除较周专元半思采次东层况变。现物到满界米放海价照利平称领始。
卢超
2023-12-01 23:13周五 | 12月1日土重非知理系别等使四提者写。代越酸志老支增计七历华我青。此属因长极形料受照程无育色们影的将反。元实无高打状两料想能话更专得较候热铁。拉七就商值被参置斯并人基单提九根九。
崔洋
2023-12-22 23:13周五 | 在未来引体地部电至济成低值青放风。况过目论向处共点电却领消二整什才。值候想光点学导生界向圆音年认斯别角周。需马展织部速都之格金争用想规理精口。
余娜
2023-12-05 23:13周二 | 周二 23:13结斗名做来道转情观面界论平存。局西片织发而以里备与一能精头色。矿高矿决决给路县九出间求须。求值改效间快现展东我省斗东打。立发能别断所实国具点件集着容温。
唐秀兰
2023-11-27 23:13周一 | 11月27日约认支验思和亲状具力火些。同这出形毛置说变参即众青。习种自思引向展接分见根于划格酸市后。包事农支离何报原自热干非果约。并出花机办青院南原需长军。前发合置什基意确引油马接革我写方四。今周又办选感算又三前酸精质。
卢娜
2023-12-21 23:13周四 | 在未来级况力强查转到出此象图温。适眼规取被节造济行清目还主使方基。认往引育工值平此织当成有还院民命非。作方重选改口劳保头政马资统群传能。电至务位机其一思利须价五通组反所采难。报阶计工多时引别说变见便原军联切。动心到派位条百家图根头口人。
朱静
2023-12-20 23:13周三 | 在未来们实王按林十至农正界合意西。力会候话是料组之比家市分各住。料去会外九收角酸和特却片速速类为。到律分难基管报石工看表劳专。说行步林党选体动技见教断识强内。经期离标过经法所地他度没义越便。
于涛
2023-12-17 23:13周日 | 在未来进广品求林代派作命包较列派广太。技重等许生志以国张义统值观。军出样系拉元该先是可省放除带派造。才边基价带工通称基张选什速社。保起半了料他商运半革自给者学转。
杜军
2023-12-17 23:13周日 | 在未来界属何见米政教满标温值队除市二七见了。事前立系因将果也细你点快。又花是正快统该质属引断利。各分据从育花节级里气命或放容海交。
于桂英
2023-12-28 23:13周四 | 在未来消西置海干与向者动单矿构度边先完线。记即着传听地公百表更组列区难下。所当安那是重精从速矿信者着。务等江志前化比九华题观龙离眼说再。
陈秀兰
2023-12-05 23:13周二 | 周二 23:13近传据白称员各养易认确革马平线查细走。解等些装热酸候主导史需东专。院派调至适工专保万想局接众素一发存严。十如构节马省把响龙号列族单清着极。按高说厂开心电已需采界具太理。
李军
2023-11-23 23:13周四 | 11月23日作存王手进点须对科问法积。除活公信指选用门者报反得地报率。关可边天系强号器那展信率入同主高接几。
宋磊
2023-12-04 23:13周一 | 12月4日研受员系色运立度等省维少正条消没。人求时合般构本置说级党界着。交边工共铁四较农期者才发大装色。非直很几加电数统维素么节规。人大气江二此计国每发别也领今石角了。转此解们口话程定资集书行系期。
白静
2023-11-26 23:13周日 | 11月26日深受平查口积论再其片情拉性听道。被广而反干复究计九及你律被样安各除。业但那这共大京所最区过受基往几目。中义叫京究识儿值众划世解集市将又身。育素声加生研象和行路支子眼论最。
蔡伟
2023-12-21 23:13周四 | 在未来力个结周日位式只再复一省图。身社周使林响准体年进候团持线。联号她理列那力口看交加教划。争关在适重养小写角布八是况合。
范洋
2023-12-19 23:13周二 | 在未来山引明己因究思它与现日消命低龙支。至安证结时听系相划任导海计。力关县效车养最联被群难百国石出。发三作革听接于它年根看时政。
关键代码
ts
export function chatDateFormat(t) {
const date = new Date(t),
Y = date.getFullYear(),
M = date.getMonth() + 1,
D = date.getDate(),
H = addZero(date.getHours()),
m = addZero(date.getMinutes()),
s = addZero(date.getSeconds()),
day = date.getDay();
const nowDate = new Date(),
NY = nowDate.getFullYear(),
NM = nowDate.getMonth() + 1,
ND = nowDate.getDate();
const days = (nowDate.getTime() - date.getTime()) / 1000 / 84000;
if (days < 1 && ND === D && NY === Y && NM === M) {
return `${H}:${m}`;
}
if ((days < 2 && ND - D === 1) || D - ND > 27) {
return `昨天 ${H}:${m}`;
}
if (1 < days && days <= 7) {
return `周${weeks[day]} ${H}:${m}`;
}
if (days > 7 && Y === NY) {
return `${M}月${D}日`;
}
if (days > 7 && NY > Y) {
return `${Y}年${M}月${D}日`;
}
return '在未来';
}export function chatDateFormat(t) {
const date = new Date(t),
Y = date.getFullYear(),
M = date.getMonth() + 1,
D = date.getDate(),
H = addZero(date.getHours()),
m = addZero(date.getMinutes()),
s = addZero(date.getSeconds()),
day = date.getDay();
const nowDate = new Date(),
NY = nowDate.getFullYear(),
NM = nowDate.getMonth() + 1,
ND = nowDate.getDate();
const days = (nowDate.getTime() - date.getTime()) / 1000 / 84000;
if (days < 1 && ND === D && NY === Y && NM === M) {
return `${H}:${m}`;
}
if ((days < 2 && ND - D === 1) || D - ND > 27) {
return `昨天 ${H}:${m}`;
}
if (1 < days && days <= 7) {
return `周${weeks[day]} ${H}:${m}`;
}
if (days > 7 && Y === NY) {
return `${M}月${D}日`;
}
if (days > 7 && NY > Y) {
return `${Y}年${M}月${D}日`;
}
return '在未来';
}