Element UI日期组件---选择月份具体到当月最后一天
Element UI日期组件---选择月份具体到当月最后一天Element已有的月份选择组件，选择月份范围的时候，只能展示开始月份的1号到结束月份的1号（例如：开始月份为3月，结束月份为3月，input框内只能展示2023-03-01至2023-03-01），但是我们的需求想要展示的是2023-03-01至2023-03-31这样的日期范围。
既然组件配置不支持这样展示，没办法了，那就拿时间戳转换吧：
<template>
<div>
<el-row class="JNPF-common-search-box" :gutter="16">
<el-form @submit.native.prevent>
<el-col :span="6">
<el-form-item label="开始时间">
<el-date-picker
v-model="query.timeRange"
type="monthrange"
size="small"
value-format="timestamp"
format="yyyy-MM-dd"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
@change="(value) => changeMonth(value, 'search')"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-form>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
disabledDate: (time) => {
// 选择的日期小于等于当前日期（不包含今天）
return time.getTime() > Date.now()
},
shortcuts: [{
text: '本月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(1);
picker.$emit('pick', );
}
}, {
text: '今年至今',
onClick(picker) {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
picker.$emit('pick', );
}
}, {
text: '最近六个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
picker.$emit('pick', );
}
}]
},
};
},
methods: {
changeMonth(value, str){
//查询当前月份月初到月末
let myDate = new Date(value);
let month = myDate.getMonth() + 1;
let yearEnd = myDate.getFullYear();
month = month < 10 ? "0" + month : month; //格式化月份，补0
let dayEnd = new Date(myDate.getFullYear(), month, 0).getDate(); //获取当月一共有多少天
let currentDate = new Date();
let currentYear = new Date().getFullYear();
let currentMonth = new Date().getMonth()+1;
if(month===currentMonth&&yearEnd===currentYear){
this.query.timeRange = , currentDate]
}else{
this.query.timeRange = , value + (dayEnd - 1) * 86400000]
}
},
},
};
from：https://blog.csdn.net/weixin_42157001/article/details/129801685
页:
[1]