JS生成Van-Picker 指定日期格式~

戳上方“ 執(zhí)行上下文 ”，選擇“ 置頂公眾號 ”

關(guān)鍵時刻，第一時間送達！

項目中需要根據(jù)后臺配置生成指定的Picker日期格式，按照自然月或者按照指定日期生成月區(qū)間。

1、第一種，自然月區(qū)間格式。

                
                generateDateRanges(year)?{
??const?dateRanges?=?[];
??const?currentYear?=?new?Date().getFullYear();
??const?currentMonth?=?new?Date().getMonth();
??
??//?計算結(jié)束月份
??const?endMonth?=?(year?>=?currentYear)???currentMonth?:?11;
??
??//?將日期格式化為數(shù)組對象
??for?(let?month?=?0;?month?<=?endMonth;?month++)?{
????const?startDate?=?new?Date(year,?month,?1);
????const?endDate?=?new?Date(year,?month?+?1,?0);
????dateRanges.push({
??????label:?`${startDate.getMonth()?+?1}月${startDate.getDate()}日至${endDate.getMonth()?+?1}月${endDate.getDate()}日`,
??????value:?[`${startDate.getFullYear()}${('0'?+?(startDate.getMonth()?+?1)).slice(-2)}${('0'?+?startDate.getDate()).slice(-2)}`,?`${endDate.getFullYear()}${('0'?+?(endDate.getMonth()?+?1)).slice(-2)}${('0'?+?endDate.getDate()).slice(-2)}`]
????});
??}
??this.monthObjs?=?dateRanges
}

              

輸出格式

                
                [
??{
????label:?'1月1日至1月31日',
????value:?[?'20230101',?'20230131'?]
??},
??{
????label:?'2月1日至2月28日',
????value:?[?'20230201',?'20230228'?]
??},
??{
????label:?'3月1日至3月31日',
????value:?[?'20230301',?'20230331'?]
??},
??{
????label:?'4月1日至4月30日',
????value:?[?'20230401',?'20230430'?]
??},
??{
????label:?'5月1日至5月31日',
????value:?[?'20230501',?'20230531'?]
??},
??{
????label:?'6月1日至6月30日',
????value:?[?'20230601',?'20230630'?]
??}
]

              

實際效果

2、第二種，指定日期生成月區(qū)間。

                
                customDate(selectYear,?date)?{
??const?now?=?new?Date();
??
??//?如果當前月份為一月，則需要計算去年的所有月份
??const?length?=?now.getFullYear()?===?selectYear???now.getMonth()?:?12;
??const?startOffset?=?date;
??
??//?定義結(jié)束日期的偏移量為起始日期偏移量減一
??const?endOffset?=?startOffset?-?1;
??
??//?定義起始月份和結(jié)束月份的數(shù)組
??const?months?=?Array.from({?length:?length?},?(_,?i)?=>?({
????start:?new?Date(i?===?0???selectYear?-?1?:?selectYear,?i,?startOffset),
????end:?new?Date(i?===?11???selectYear?:?selectYear,?(i?+?1)?%?12,?endOffset),
??}));
??
??//?將日期格式化為數(shù)組對象
??const?monthObjs?=?months.map(({?start,?end?})?=>?({
????label:?`${start.getMonth()?+?1}月${start.getDate()}日至${end.getMonth()?+?1}月${end.getDate()}日`,
????value:?[
??????`${start.getFullYear()}${(start.getMonth()?+?1).toString().padStart(2,?'0')}${start.getDate().toString().padStart(2,?'0')}`,
??????`${end.getFullYear()}${(end.getMonth()?+?1).toString().padStart(2,?'0')}${end.getDate().toString().padStart(2,?'0')}`
????],
????isStart:?end?>?now,
??}));
??
??this.monthObjs?=?monthObjs
}

              

輸出結(jié)果

                
                [
??{
????"label":?"1月6日-2月5日",
????"value":?["20230106",?"20230205"],
??},
??{
????"label":?"2月6日-3月5日",
????"value":?["20230206",?"20230305"],
??},
??{
????"label":?"3月6日-4月5日",
????"value":?["20230306",?"20230405"],
??},
??{
????"label":?"4月6日-5月5日",
????"value":?["20230406",?"20230505"],
??},
??{
????"label":?"5月6日-6月5日",
????"value":?["20230506",?"20230605"],
??}
]

              

實際效果

吸貓專區(qū)

前端公眾號和交流群