JS生成Van-Picker 指定日期格式~
戳上方“ 执行上下文 ”，选择“ 置顶公众号 ”
关键时刻，第一时间送达！
项目中需要根据后台配置生成指定的Picker日期格式，按照自然月或者按照指定日期生成月区间。
1、第一种，自然月区间格式。
generateDateRanges(year) {
const dateRanges = [];
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth();
// 计算结束月份
const endMonth = (year >= currentYear) ? currentMonth : 11;
// 将日期格式化为数组对象
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、第二种，指定日期生成月区间。
customDate(selectYear, date) {
const now = new Date();
// 如果当前月份为一月，则需要计算去年的所有月份
const length = now.getFullYear() === selectYear ? now.getMonth() : 12;
const startOffset = date;
// 定义结束日期的偏移量为起始日期偏移量减一
const endOffset = startOffset - 1;
// 定义起始月份和结束月份的数组
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),
}));
// 将日期格式化为数组对象
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
}
输出结果
[
{
"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"],
}
]
实际效果
吸猫专区
前端公众号和交流群
评论