弹框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<select id="date-dropdown"></select>
<div>
<label for="start-time">开始时间:</label>
<select id="start-time"></select>
</div>
<div>
<label for="end-time">结束时间:</label>
<select id="end-time"></select>
</div>
<script>
$(document).ready(function() {
function generateTimeOptions() {
var $startTimePicker = $('#start-time');
var $endTimePicker = $('#end-time');

$startTimePicker.empty(); // 清空开始时间下拉列表
$endTimePicker.empty(); // 清空结束时间下拉列表

// 时间范围
var startTime = new Date();
startTime.setHours(8, 0, 0, 0); // 设置开始时间为 08:00

var endTime = new Date();
endTime.setHours(21, 0, 0, 0); // 设置结束时间为 21:00

// 以 30 分钟为间隔生成时间选项
while (startTime <= endTime) {
var hours = ('0' + startTime.getHours()).slice(-2);
var minutes = ('0' + startTime.getMinutes()).slice(-2);

var optionText = hours + ':' + minutes;
var optionValue = hours + ':' + minutes;

$startTimePicker.append($('<option></option>').attr('value', optionValue).text(optionText));
$endTimePicker.append($('<option></option>').attr('value', optionValue).text(optionText));

// 增加 30 分钟
startTime.setMinutes(startTime.getMinutes() + 30);
}

// 确保结束时间大于开始时间
$startTimePicker.change(function() {
var startTimeValue = $(this).val();
var startDate = new Date('1970-01-01T' + startTimeValue + ':00');
var endTimeOptions = $endTimePicker.find('option');

endTimeOptions.each(function() {
var endTimeValue = $(this).val();
var endDate = new Date('1970-01-01T' + endTimeValue + ':00');
if (endDate <= startDate) {
$(this).hide(); // 隐藏不符合条件的结束时间选项
} else {
$(this).show(); // 显示符合条件的结束时间选项
}
});
});

// 初始化结束时间选择器的选项
$('#start-time').trigger('change');
}

function getWeekdayName(date) {
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
return weekdays[date.getDay()];
}

function getFormattedDate(date) {
var month = ('0' + (date.getMonth() + 1)).slice(-2);
var day = ('0' + date.getDate()).slice(-2);
return month + '-' + day;
}

function populateDropdown() {
var $dropdown = $('#date-dropdown');
$dropdown.empty(); // 清空下拉列表

for (var i = 0; i < 7; i++) {
var date = new Date();
date.setDate(date.getDate() + i);

var weekdayName = getWeekdayName(date);
var formattedDate = getFormattedDate(date);

var optionText = weekdayName + ' ' + formattedDate;
var optionValue = weekdayName + ' ' + formattedDate;

$dropdown.append($('<option></option>').attr('value', optionValue).text(optionText));
}
}

populateDropdown();
generateTimeOptions();
});
</script>
</body>
</html>
posted @ 2024-07-23 08:27  佬zz  阅读(9)  评论(0)    收藏  举报