layui时间与日期选择器，时间范围查询数据，后端springboot

需求

我需要根据时间段，比如10.1号——10月31号，查询此时间段的对应数据。

实体类

user：含有姓名，性别。其中有个入职时间private Date interviewTime;

我们需要根据入职时间，查询指定范围的数据

前端

                    <div class="layui-inline" id="ID-laydate-rangeLinked"><div class="layui-input-inline"><input type="text" autocomplete="off" id="ID-laydate-start-date-1" class="layui-input" placeholder="开始日期"></div>-<div class="layui-input-inline"><input type="text" autocomplete="off" id="ID-laydate-end-date-1" class="layui-input" placeholder="结束日期"></div></div>

效果如下

这里使用的是layui，需要引入对应js,css,官方网址：https://layui.dev/docs/2/laydate/#demo-range

上面是定义一个input输入框，下面是js函数

/*** 根据时间段查询*/layui.use('laydate', function(){//这里定义的是一个laydate函数，var laydate = layui.laydate;// 存储开始和结束时间的变量var startTime = null;var endTime = null;// 时间范围选择（单输入框）laydate.render({elem: '#ID-laydate-rangeLinked',// 绑定元素，对应的是input输入框的idtype: 'date',// 可选：'date'（日期）或 'datetime'（日期时间）range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],//对应上述的两个input输入框rangeLinked: true, // 开启日期范围选择时的区间联动标注模式 // 开启范围选择，用 '~' 分隔（也可用 true，默认用' - '）format: 'yyyy-MM-dd', // 返回格式theme: 'default',//主体，默认的，可以不写done: function(value, startDate, endDate){//这里选择好日期，点击确定之后的回调函数，返回日期的对象/*** value 示例："2025-04-01 08:00:00 ~ 2025-10-23 18:30:00"* startDate 是开始时间对象 {year, month, day, hour, min, sec}* endDate 是结束时间对象*/if (startDate && endDate) { //然后拼接一下，startTime，endTime// 格式化为标准字符串（可直接传给后端）startTime = startDate.year + '-' +startDate.month + '-' +startDate.date;endTime = endDate.year + '-' +endDate.month + '-' +endDate.date;} else {startTime = null;endTime = null;}build_page_nav();//执行查询函数,这里我们有单独写搜索按钮，是直接选中时间之后，直接执行ajax向后台发送数据，查询对应数据}});// 查询函数function build_page_nav() {if (!startTime || !endTime) {alert('请先选择完整的时间范围');return;}if (!startTime || !endTime) {alert('时间格式错误！');return;}// 发送 Ajax 请求$.ajax({url: 'http://localhost:8081/boss/selectByInterviewTimeBetween',// 替换为你的后端接口type: 'get',xhrFields: {widthCredentials: true},async: false,data: {startTime: startTime,endTime: endTime},success: function (result) {if (0 === result.code) {bossList = result.data.list;//1.重新加载reloadDom();//2.解析并显示分页信息build_page_info(result);//解析并显示分页条数据build_page_nav(result);} else {window.location = "index.html";}}});};});

如下是后端接收参数，返回数据的代码:@RequestParam("startTime")@DateTimeFormat(pattern = "yyyy-MM-dd"),因为实体类user中没有startTime属性，所以这里要绑定一下，另外格式化一下日期，不然会报参数不一致错误

    @RequestMapping("/selectByInterviewTimeBetween")@ResponseBodypublic CommonReturnType selectByInterviewTimeBetween(HttpSession session,@RequestParam("startTime")@DateTimeFormat(pattern = "yyyy-MM-dd") Date startTime,@RequestParam("endTime")@DateTimeFormat(pattern = "yyyy-MM-dd") Date endTime) {if (session.getAttribute("username")==null){return CommonReturnType.fail();}else {List<BossDo> bossDos = bossService.selectBynterviewTimeBetween(startTime,endTime);PageInfo<BossDo> pageInfo =new PageInfo<>(bossDos);return CommonReturnType.success(pageInfo);//返回实体类型数据}}

对应数据库这里传参

  <select id="selectBynterviewTimeBetween" resultMap="BaseResultMap">select*from t_boss //数据库表名称WHEREinterviewTime BETWEEN #{startTime} AND #{endTime}ORDER BY interviewTime DESC</select>