Element已有的月份选择组件,只能展示开始月份的1号到结束月份的1号(例如:开始月份为3月,结束月份为3月,input框内只能展示2023-03-01至2023-03-01),但是我们的需求想要展示的是2023-03-01至2023-03-31这样的日期范围。
<template>
<div>
<el-date-picker
v-model="search.date"
type="monthrange"
size="small"
format="yyyy-MM-dd"
value-format="timestamp"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
@change="(value) => changeMonth(value, 'search')"
>
</el-date-picker>
</div>
</template>
changeMonth(value, str){
//查询当前月份月初到月末
let myDate = new Date(value[1]);
let month = myDate.getMonth() + 1;
month = month < 10 ? "0" + month : month; //格式化月份,补0
let dayEnd = new Date(myDate.getFullYear(), month, 0).getDate(); //获取当月一共有多少天
this.search.date = [value[0], value[1] + (dayEnd - 1) * 86400000]
console.log(value[0],'开始')
console.log(value[1] + (dayEnd - 1) * 86400000,'结束')
},
效果如图:可以选择7月到7月,也可以选择7-8月等。。