以下是一个基于jQuery UI的简单预定会议室的页面：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会议室预定</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
.ui-timepicker-standard {
font-family: Arial;
font-size: 14px;
width: 100%;
}
.ui-datepicker {
margin-top: 12px;
}
.ui-timepicker-list li {
cursor: pointer;
}
#availableTimeslots {
margin-top: 20px;
border: 1px solid #ccc;
height: 400px;
overflow-y: auto;
padding: 10px;
}
.timeslot {
border: 1px solid #ccc;
padding: 5px;
margin-bottom: 5px;
background-color: #f9f9f9;
cursor: pointer;
}
.timeslot.unavailable {
background-color: #ddd;
cursor: not-allowed;
}
.timeslot.selected {
background-color: #428bca;
color: #fff;
}
#reserveBtn {
margin-top: 20px;
padding: 10px;
background-color: #428bca;
color: #fff;
border: none;
cursor: pointer;
}
#reserveBtn:hover {
background-color: #3071a9;
}
</style>
</head>
<body>
<h1>会议室预定</h1>
<div>
<label for="datepicker">日期:</label>
<input type="text" id="datepicker">
<label for="starttimepicker">开始：</label>
<input type="text" id="starttimepicker">
<label for="endtimepicker">结束：</label>
<input type="text" id="endtimepicker">
<button id="addToCartBtn" disabled>加入预定</button>
</div>
<div id="availableTimeslots"></div>
<div>
<button id="reserveBtn" disabled>预定会议室</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
// Datepicker
$("#datepicker").datepicker({
minDate: 0,
onSelect: function (dateText, inst) {
updateAvailableTimeslots(dateText);
}
});
// Timepicker
$('#starttimepicker,#endtimepicker').timepicker({
timeFormat: 'HH:mm',
interval: 30,
dropdown: true,
scrollbar: true,
minTime: '8:00',
maxTime: '22:00',
dynamic: false,
change: function (time) {
var startTime = $('#starttimepicker').val();
var endTime = $('#endtimepicker').val();
// 检查选择的时间段是否在可预定时间范围内
if (startTime < '8:00' || endTime > '22:00' || startTime >= endTime) {
$('#startdatepicker,#enddatepicker').val('');
$('#addToCartBtn').prop('disabled', true);
} else {
updateAvailableTimeslots($('#datepicker').val());
}
}
});
// 拖拽选择时间段
$(document).on('mousedown', '.timeslot',
function (e) {
$('.timeslot').removeClass('selected');
$(this).addClass('selected');
$('#reserveBtn').prop('disabled', false);
$('#addToCartBtn').prop('disabled', true);
}
);
// 预定会议室
$('#reserveBtn').on('click', function () {
var selectedTimeslot = $('.timeslot.selected');
var date = $('#datepicker').val();
var startTime = $('#starttimepicker').val();
var endTime = $('#endtimepicker').val();
alert(`您预定了 ${date} ${startTime}-${endTime} 的会议室`);
selectedTimeslot.removeClass('available').addClass('unavailable').removeClass('selected');
$('#reserveBtn').prop('disabled', true);
});
});
function updateAvailableTimeslots(date) {
$('#availableTimeslots').html('');
var startTime = $('#starttimepicker').val();
var endTime = $('#endtimepicker').val();
if (startTime && endTime) {
var startHour = parseInt(startTime.split(':')[0]);
var endHour = parseInt(endTime.split(':')[0]);
for (var hour = startHour; hour < endHour; hour++) {
var timeslot = $('<div></div>').addClass('timeslot available');
timeslot.text(hour + ':00 - ' + (hour + 1) + ':00');
$('#availableTimeslots').append(timeslot);
}
} else {
$('#addToCartBtn').prop('disabled', true);
}
}
</script>
</body>
</html>
```
在这个实现中，用户可以选择预定日期和开始结束时间，并在可预定时间范围内拖拽选择时间段。预定按钮将被激活并点击后会展示一个简单的提示信息，并将已选择的时间段设置为不可预定。
