图书馆座位预约时间冲突提示(前后端全) 前端elementUI 时间选择器只显示时和分，SQL实现时间冲突判断

本文介绍: 前端样式选择的是el m entUI，但是它组件只有日期时间选择器：年月日时分秒。不满足我的需求，所以要改造下。功能描述如下：学生选择开始时间和结束时间，只选择小时和分钟，提交预约后，如果该时间有冲突提示学生修改预约时间。帮客户定制项目，要实现图书馆预约座位的功能。如何改造，后端更好处理数据以及业务逻辑？时间选择器（只有时和分）

背景

帮客户定制项目，要实现图书馆预约座位的功能。
功能描述如下：学生选择开始时间和结束时间，只选择小时和分钟，提交预约后，如果该时间有冲突提示学生修改预约时间。

问题

前端样式选择的是el m entUI，但是它组件只有日期时间选择器：年月日时分秒。不满足我的需求，所以要改造下。该怎么改造？
如何改造，后端更好处理数据以及业务逻辑？

实现 过程

前端样式

时间选择器（只有时和分）

 &lt;el-form-item label="开始时间"&gt;
    &lt;el-time-picker v-model="form.startTime"  value-format="HH:mm" format="HH:mm"  size="small" style="width: 100%"&gt;&lt;/el-time-picker&gt;
  </el-form-item&gt;
  <el-form-item label="结束时间"&gt;
    <el-time-picker v-model="form.endTime" format='HH:mm' value-format="HH:mm" size="small" style="width: 100%"&gt;
    </el-time-picker&gt;
  </el-form-item&gt;

后端业务逻辑和SQL

 //预约前判断该座位该时间段是否被预约，如果被预约，则提示改时间段不能被预约。
        Integer seatId = seatReservation.getSeatId();
        List<SeatReservation> byNum = seatReservationDao.findByNum(seatId, seatReservation.getStartTime(), seatReservation.getEndTime());
        if (CollectionUtil.isNotEmpty(byNum)){
            throw new CustomException("-1","该时间段已经被预约");
        }

Dao

@Select("select * from seatreservation where seatId = #{seatId} and !(startTime > #{end} or endTime < #{start})")
    List<SeatReservation> findByNum(@Param("seatId")Integer seatId, @Param("start") String start, @Param("end") String end);