英文:
Time Doesnt Populate in the Dropdown - Jquery
问题
以下是您提供的代码的翻译部分：
<html>
<head>
<style>
#booking-form {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
</head>
<body>
<div id="calendar"></div>
<div id="booking-form">
<h2>预约</h2>
<p>请选择日期和时间：</p>
<form action="book-appointment.php" method="post">
<input type="hidden" id="selected-date" name="selected-date" value="">
<select id="selected-time" name="selected-time"></select>
<br><br>
<button type="submit">预约</button>
</form>
</div>
<script>
// 使用来自PHP的可用日期和时间
var availableDates = ["2023-02-17","2023-02-19","2023-02-20","2023-02-25","2023-02-27"];
var availableDateTime = {
"2023-02-17":["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00"],
"2023-02-19":["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00"],
"2023-02-20":["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00"],
"2023-02-25":["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00"],
"2023-02-27":["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00"]
};
// 初始化日历
$('#calendar').datepicker({
minDate: 0, // 将minDate设置为0以禁用过去的日期
beforeShowDay: function(date) {
var dateString = $.datepicker.formatDate('yy-mm-dd', date);
return [$.inArray(dateString, availableDates) != -1];
},
onSelect: function(dateText, inst) {
// 在选择日期时显示预订表单
$('#booking-form').show();
// 存储所选日期
$('#selected-date').val(dateText);
// 清空时间选择中的先前选项
$('#selected-time').empty();
// 获取所选日期
var selectedDate = new Date(dateText);
// 将所选日期的可用时间添加到时间选择中
var availableHoursForSelectedDate = availableDateTime[selectedDate.getFullYear() + '-' + (selectedDate.getMonth() + 1) + '-' + selectedDate.getDate()];
$.each(availableHoursForSelectedDate, function(i, time) {
var optionText = time;
var optionValue = time;
$('#selected-time').append($('<option>').text(optionText).val(optionValue));
});
// 在时间选择中禁用不可用的时间
var currentDate = new Date();
if (selectedDate.getDate() === currentDate.getDate()) {
// 禁用当前小时之前的时间
var currentHour = currentDate.getHours();
$('#selected-time option').each(function() {
var optionText = $(this).text();
var hour = parseInt(optionText.substr(0, 2));
if (hour < currentHour) {
$(this).prop('disabled', true);
}
});
}
else {
// 禁用上午9点之前和下午5点之后的所有时间
$('#selected-time option').each(function() {
var optionText = $(this).text();
var startHour = parseInt(optionText.substr(0, 2));
var endHour = parseInt(optionText.substr(8, 2));
if (startHour < 9 || endHour > 16) {
$(this).prop('disabled', true);
}
});
}
}
});
</script>
</body>
</html>
希望这能帮助您理解代码的翻译。如有其他问题，请随时提出。
英文:
I have the following code, which works well but the problem is when I select the date it doesn't populate the selected-time dropdown, its blank. It should populate the correct available hours for the selected date in that dropdown
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<head>
<style>
#booking-form {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
</head>
<body>
<div id="calendar"></div>
<div id="booking-form">
<h2>Book an appointment</h2>
<p>Please select a date and time:</p>
<form action="book-appointment.php" method="post">
<input type="hidden" id="selected-date" name="selected-date" value="">
<select id="selected-time" name="selected-time"></select>
<br><br>
<button type="submit">Book Appointment</button>
</form>
</div>
<script>
// Use available dates and hours from PHP
var availableDates = ["2023-02-17","2023-02-19","2023-02-20","2023-02-25","2023-02-27"];
var availableDateTime = {"2023-02-17":["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00"],"2023-02-19":["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00"],"2023-02-20":["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00"],"2023-02-25":["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00"],"2023-02-27":["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00"]};
// Initialize calendar
$('#calendar').datepicker({
minDate: 0, // Set minDate to 0 to disable past dates
beforeShowDay: function(date) {
var dateString = $.datepicker.formatDate('yy-mm-dd', date);
return [$.inArray(dateString, availableDates) != -1];
},
onSelect: function(dateText, inst) {
// Show booking form on date selection
$('#booking-form').show();
// Store selected date
$('#selected-date').val(dateText);
// Clear previous options from time select
$('#selected-time').empty();
// Get selected date
var selectedDate = new Date(dateText);
// Add available hours for the selected date to time select
var availableHoursForSelectedDate = availableDateTime[selectedDate.getFullYear() + '-' + (selectedDate.getMonth() + 1) + '-' + selectedDate.getDate()];
$.each(availableHoursForSelectedDate, function(i, time) {
var optionText = time;
var optionValue = time;
$('#selected-time').append($('<option>').text(optionText).val(optionValue));
});
// Disable unavailable hours in time select
var currentDate = new Date();
if (selectedDate.getDate() === currentDate.getDate()) {
// Disable hours before current hour
var currentHour = currentDate.getHours();
$('#selected-time option').each(function() {
var optionText = $(this).text();
var hour = parseInt(optionText.substr(0, 2));
if (hour < currentHour) {
$(this).prop('disabled', true);
}
});
}
else {
// Disable all hours before 9am and after 5pm
$('#selected-time option').each(function() {
var optionText = $(this).text();
var startHour = parseInt(optionText.substr(0, 2));
var endHour = parseInt(optionText.substr(8, 2));
if (startHour < 9 || endHour > 16) {
$(this).prop('disabled', true);
}
});
}
}
});
</script>
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
代码部分不需要翻译，以下是已翻译的内容：
问题出在你构建用于查找availableDateTime对象的键上。具体来说，它没有包含月份和日期值的0填充。例如，今天是2023年2月18日，但selectedDate.getFullYear() + '-' + (selectedDate.getMonth() + 1) + '-' + selectedDate.getDate()将计算为2023-2-18，而不是2023-02-18。
根据@Swati分享的链接，我们了解如何在格式化数字左侧填充'0'，这是我们需要对格式化日期的月份和日期值都要做的事情。
代码变成了：
var dateKey = `${selectedDate.getFullYear()}-${('0' + (selectedDate.getMonth() + 1)).slice(-2)}-${('0' + selectedDate.getDate()).slice(-2)}`;
var availableHoursForSelectedDate = availableDateTime[dateKey];
这里是一个示例fiddle。
英文:
The issue is with the key you construct for your lookup on the availableDateTime object. Specifically, it doesn't include the 0 padding for the month and day values. For example, today is February 18, 2023; but selectedDate.getFullYear() + '-' + (selectedDate.getMonth() + 1) + '-' + selectedDate.getDate() will evaluate to 2023-2-18, not 2023-02-18.
Following the link that @Swati shared, we learn how to left pad our formatted digits with a '0', which we would need to do for both the month and day values of our formatted date.
The code becomes:
var dateKey = `${selectedDate.getFullYear()}-${('0' + (selectedDate.getMonth() + 1)).slice(-2)}-${('0' + selectedDate.getDate()).slice(-2)}`;
var availableHoursForSelectedDate = availableDateTime[dateKey];
Here is an example fiddle.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论