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输入框的id
                type: '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")
    @ResponseBody
    public 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 //数据库表名称
    WHERE
        interviewTime BETWEEN #{startTime} AND #{endTime}
    ORDER BY interviewTime DESC
  </select>