<el-form-item label="请选择时间" prop="username">
<el-date-picker
v-model="detaTime"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
@change="handleDateChange"
>
</el-date-picker>
</el-form-item>
在全局变量中加入 我的是到五月,可以自行修改
detaTime: [],
pickerOptions: {
disabledDate: (time) => {
// 获取当前月的最后一天
const currentDate = new Date()
const lastDay = new Date(
currentDate.getFullYear(),
currentDate.getMonth() + 1,
0
)
// 限制开始时间不能早于2025-05-01
const minDate = new Date(2025, 4, 1) // 月份是0-based,所以4表示5月
// 如果正在选择开始日期
if (this.detaTime && !this.detaTime[1]) {
return time.getTime() < minDate.getTime() ||
time.getTime() > lastDay.getTime()
}
// 如果正在选择结束日期
if (this.detaTime && this.detaTime[0]) {
const startDate = new Date(this.detaTime[0])
return time.getTime() < startDate.getTime() ||
time.getTime() > lastDay.getTime()
}
// 默认情况
return time.getTime() < minDate.getTime() ||
time.getTime() > lastDay.getTime()
}
},
mounted() {
// 设置默认结束日期为当前月最后一天
const currentDate = new Date()
const lastDay = new Date(
currentDate.getFullYear(),
currentDate.getMonth() + 1,
0
)
const formattedLastDay = `${lastDay.getFullYear()}-${String(lastDay.getMonth() + 1).padStart(2, '0')}-${String(lastDay.getDate()).padStart(2, '0')}`
// 设置默认日期范围为2025-05-01到当前月最后一天
this.dateRange = ['2025-05-01', formattedLastDay]
},
获取当前时间,并且在当前时间往前推几天进行查询
// 获取当前时间作为结束时间
const endDate = new Date();
const startDate = new Date();
startDate.setDate(startDate.getDate() - 7);
this.detaTime[0] = this.startFormatDate(startDate);
this.detaTime[1] = this.formatDate(endDate);
this.queryParams.startTime = this.startFormatDate(startDate) + ' 00:00:00';
this.queryParams.endTime = this.formatDate(endDate);
对日期进行格式化显示
handleDateChange(val) {
if (val && val.length === 2) {
// 确保结束日期是当前月的最后一天
const endDate = new Date(val[1])
const lastDay = new Date(
endDate.getFullYear(),
endDate.getMonth() + 1,
0
)
if (endDate.getDate() !== lastDay.getDate()) {
const formattedLastDay = `${lastDay.getFullYear()}-${String(lastDay.getMonth() + 1).padStart(2, '0')}-${String(lastDay.getDate()).padStart(2, '0')}`
this.dateRange = [val[0], formattedLastDay]
}
}
},
formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
startFormatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day} `;
},
2300

被折叠的 条评论
为什么被折叠?



