前端：vue

后端：springboot  QueryWrapper

前端vue组件：a-range-picker

<a-range-picker:ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"@change="onChange"
/>
import moment from 'moment';data() {return {
startValue: null,
endValue: null,
}
methods：{
moment,
onChange(dates, dateStrings) {// console.log('From: ', dates[0], ', to: ', dates[1]);console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);this.startValue = dateStrings[0] + " 00:00:00";this.endValue = dateStrings[1] + " 23:59:59";
},
//提交方法
submitSearchForm(){
if (this.startValue != null) { startDate = this.startValue; } 
if (this.endValue != null) { endDate = this.endValue; }
}
}

后端：

实体：AppointmentDto中的 startDate、endDate

/*** 开始时间*/
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime startDate;
/*** 结束时间*/
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime endDate;

appointmentDto作为实体类对象

if (appointmentDto.getStartDate() != null || appointmentDto.getEndDate() != null) {QueryWrapper<Appointment> queryWrapper = new QueryWrapper<>();queryWrapper.ge("appointment_time", appointmentDto.getStartDate());queryWrapper.le("appointment_time", appointmentDto.getEndDate());
}