Element's existing month selection component can only display the 1st of the start month to the 1st of the end month (for example: the start month is March, the end month is March, and the input box can only display 2023-03-01 to 2023-03-01), but what we want to display is the date range from 2023-03-01 to 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,'结束')
},
The effect is as shown in the figure: you can choose from July to July, or you can choose from July to August. .