场景:在项目中需要直接展示日期选择器,支持选择开始结束时间,禁用接口返回日期之前所有日期,如图
<el-date-picker
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
ref="daterange"
class="date_style"
popper-class="dateranges"
@blur="chooseDate"
:picker-options="pickerOptions"
@change="handlechange"
> </el-date-picker>
export default {
data(){
value1: '',
pickerOptions: {
disabledDate: this.disabledDate
},
startTime: '',
endTime: '',
timeAll: []
},
methods: {
// 日期禁用
disabledDate(time) {
var date = '';
if (this.lastDate) { // 接口返回日期格式20230715,需要禁用包含这个日期之前的所有日期
date = this.lastDate.slice(0, 4) + '-' + this.lastDate.slice(4, 6) + '-' + this.lastDate.slice(6, 8)
}
return time.getTime() < new Date(date);
},
// 失去焦点
chooseDate() {
this.$refs.daterange.focus(); // 选择日期后依旧触发焦点
},
// 修改日期
handlechange(val) {
// val 返回格式为[Sun Jul 16 2023 00:00:00 GMT+0800 (中国标准时间), Fri Jul 21 2023 00:00:00 GMT+0800 (中国标准时间)]需转换年月日
this.startTime = this.formatDateTime(val[0]);
this.endTime = this.formatDateTime(val[1]);
this.timeAll = this.getAll(this.startTime, this.endTime); // 开始结束时间之间的每一天集合['2023-07-16', '2023-07-17', '2023-07-18']
},
// 中国标准时间 转换成 年月日
formatDateTime (date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
var minute = date.getMinutes();
minute = minute < 10 ? ('0' + minute) : minute;
return y + '-' + m + '-' + d;
},
// 获取开始结束时间之间的每一天
getAll(start, end) {
let dateList = [];
var startTime = this.getDate(start);
var endTime = this.getDate(end);
while ((endTime.getTime() - startTime.getTime()) >= 0) {
var year = startTime.getFullYear();
var month = startTime.getMonth() + 1 < 10 ? '0' + (startTime.getMonth() + 1) : startTime.getMonth() + 1;
var day = startTime.getDate().toString().length == 1 ? "0" + startTime.getDate() : startTime.getDate();
dateList.push(year + "-" + month + "-" + day);
startTime.setDate(startTime.getDate() + 1);
}
return dateList;
},
}
}
<style lang="scss">
.dateranges{
width: 640px;
height: 273px;
box-shadow: none!important;
.el-picker-panel{
box-shadow: none!important;
}
.popper__arrow{
display: none!important;
}
.el-picker-panel__body-wrapper{
width: 640px;
}
.el-date-table td {
padding: 1px 0;
}
.el-date-table th {
padding: 0px;
}
.el-date-range-picker__content{
padding: 9px;
}
}
</style>