jQuery中selected-time下拉框无法填充时间的问题排查

你的代码核心问题是日期格式不匹配，导致无法从availableDateTime中读取对应时段：

• 你在onSelect里通过new Date(dateText)生成日期后，手动拼接的日期字符串（比如2023-2-17），和availableDateTime里的键（2023-02-17，月份/日期是两位补零格式）不一致，所以availableHoursForSelectedDate会是undefined，自然无法填充下拉框。
• 另外else分支里的optionText.substr(8, 2)是错误的，因为你的时间格式是HH:00（长度仅5位），这部分会取到空值，导致endHour为NaN，逻辑完全失效。

修复后的代码 #

<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();

      // 直接用dateText作为键，格式完全匹配availableDateTime的键
      var availableHoursForSelectedDate = availableDateTime[dateText];

      if (availableHoursForSelectedDate) { // 增加判断，避免无数据时报错
        $.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();
      // 将selectedDate转为Date对象，用于和当前日期比较
      var selectedDate = new Date(dateText);
      // 注意：比较日期要考虑年月日，只比较getDate()会跨月出错，这里改用toDateString()统一格式后比较
      if (selectedDate.toDateString() === currentDate.toDateString()) {
        // 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分支可以移除，因为availableDateTime里的时段已经是9-16点，不需要重复判断
    }
  });
</script>
</body>
</html>

关键修改点 #

1. 直接使用dateText作为键：dateText是jQuery UI DatePicker返回的yy-mm-dd格式字符串，和availableDateTime的键完全匹配，无需手动拼接日期。
2. 增加非空判断：避免当availableDateTime中无对应日期数据时，$.each遍历undefined报错。
3. 修正日期比较逻辑：原代码只比较getDate()（日），会出现跨月同日期误判的问题，改用toDateString()将日期转为统一格式字符串后比较。
4. 移除无效的else分支：你的availableDateTime里的时段都是9:00-16:00，不需要再额外过滤，若后续需要扩展时段，可重新调整判断逻辑。

内容的提问来源于stack exchange，提问作者TSCAmerica.com