Jquery UI 日期选择器日历未按预期工作

Question

我有一个包含酒店房间列表的页面。每个房间都有一个 link 用于打开可用性日历。我发现如果我点击第一个房间，日历就会正确显示。但是 links 在列表下方打开文件而不是日历。如果我从底部开始向上工作，它们都会正确打开。

以非常简化的形式，这是包含列表的页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="ROBOTS" content="NONE">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
<br><br>
<a href="javascript:;" class="click" data-roomid="1133">1133</a>
<br><br>
<div class="hiddencal" data-roomid="1133" style="height:250px"></div>
<a href="javascript:;" class="click" data-roomid="1134">1134</a>
<br><br>
<div class="hiddencal" data-roomid="1134" style="height:250px"></div>
<a href="javascript:;" class="click" data-roomid="1135">1135</a>
<br><br>
<div class="hiddencal" data-roomid="1135" style="height:250px"></div>
<a href="javascript:;" class="click" data-roomid="1136">1136</a>
<br><br>
<div class="hiddencal" data-roomid="1136" style="height:250px"></div>
<br><br>

<script>
$(document).ready(function() {
    $("a.click").on('click', function() {
        var roomid = $(this).attr("data-roomid");
        $(".hiddencal[data-roomid='" + roomid + "']").load("testcalendar.php?hid=encinas&room_id=" + roomid + "&month=06&year=2019");
    });
});
</script>
</body>
</html>

这是带有日历的文件：

<?php 
//Select database
require_once('XXXXXXXXXXXXXXXX');
mysqli_select_db(XXXXXXXXXXXXXXX);
mysqli_set_charset(XXXXXXXXXXXXX);

// Get the hid which is passed from previous page
if (isset($_REQUEST['hid'])) {
    $hid=$_REQUEST['hid'];
}

// Get the room_id which is passed from previous page
if (isset($_REQUEST['room_id'])) {
    $room_id=$_REQUEST['room_id'];
}

// Get the month and year passed from previous page
if (isset($_REQUEST['month'])) {
    $month=$_REQUEST['month'];
}
if (isset($_REQUEST['year'])) {
    $year=$_REQUEST['year'];
}

$setdate = $year."-".$month."-01";

$firstmonth = $month - 2;
if($firstmonth==0) {
    $firstmonth=12;
    $year=$year-1;
}
if($firstmonth==-1) {
    $firstmonth=11;
    $year=$year-1;
}
$firstdate = $year."-".$firstmonth."-01";
$lastdate=date('Y-m-d', strtotime("$firstdate +300 day"));

?>

<!DOCTYPE HTML>
<html>
<head>
<meta name="ROBOTS" content="NONE">
<link rel="stylesheet" type="text/css" href="../css/jquery-ui.min.css">

</head>

<body>
<h5>Test Calendar - <?php echo $room_id ?></h5>
<div id="calendar"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<script>
$(function() {

    function avail(date) {
       return true;
    }

    $('#calendar').datepicker({
        beforeShowDay: avail, 
        dateFormat: 'yy-mm-dd',
        defaultDate: '<?php echo $setdate ?>',
        minDate: '<?php echo $firstdate ?>',
        maxDate: '<?php echo $lastdate ?>',
        numberOfMonths: 1,
        stepMonths: 1,
        showOtherMonths: true
    });
});
</script>
</body>
</html>

在日历失败的情况下，会显示标题 ("Test Calendar - 1136")，所以我知道我正在访问该文件。据推测，这是脚本最后的内容，但我看不出问题所在。

Answer 1

这是您可能想要考虑的示例方法。

$(function() {
  function checkDate(rId, dObj) {
    var dStr = $.datepicker.formatDate("yy-mm-dd", dObj);
    $.get("testcalendar.php", {
      hid: "encinas",
      room_id: rId,
      date: dStr
    }, function(result) {
      if (result) {
        return result;
      } else {
        return true;
      }
    });
    return true;
  }
  $(".room-cal").datepicker({
    dateFormat: 'yy-mm-dd',
    numberOfMonths: 1,
    stepMonths: 1,
    showOtherMonths: true,
    showButtonPanel: true,
    minDate: "+1d",
    maxDate: "+300d",
    beforeShowDay: function(dt) {
      var r = $(this).parent().parent();
      var a = checkDate(r.data("room-id"), dt);
      return [a, (a ? "available" : "booked")];
    }
  });
  $(".room-avail").on("click", function() {
    var cal = $(".room-cal", this);
    cal.datepicker("show");
  });
});

.room {
  margin: 3px;
  padding: .75em;
  border: 2px solid #ccc;
  border-radius: 3px;
}

.room-title {
  font-weight: bold;
  font-size: 18pt;
}

.room-avail {
  background: #cfcfcf;
  float: right;
  display: inline-block;
  border: 1px solid #999;
  border-radius: 3px;
  padding: .4em .2em;
  margin-right: 20px;
  cursor: pointer;
}

.room-cal {
  display: none;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="room" data-room-id="1133">
  <div class="room-avail" title="Click to see Availiblity"><input type="text" class="room-cal" /><span class="ui-icon ui-icon-calendar"></span> Date Availible</div>
  <div class="room-title">2 Twins - 1133</div>
  <div class="room-desc">Ocean View</div>
</div>
<div class="room" data-room-id="1134">
  <div class="room-avail" title="Click to see Availiblity"><span class="ui-icon ui-icon-calendar"></span> Date Availible</div>
  <div class="room-title">2 Twins - 1134</div>
  <div class="room-desc">First Floor</div>
</div>
<div class="room" data-room-id="1135">
  <div class="room-avail" title="Click to see Availiblity"><span class="ui-icon ui-icon-calendar"></span> Date Availible</div>
  <div class="room-title">2 Twins - 1135</div>
  <div class="room-desc">Ocean View</div>
</div>
<div class="room" data-room-id="1136">
  <div class="room-avail" title="Click to see Availiblity"><span class="ui-icon ui-icon-calendar"></span> Date Availible</div>
  <div class="room-title">2 Twins - 1136</div>
  <div class="room-desc">First Floor</div>
</div>

在 PHP 中，您可能有类似的内容：

<?php
// check-date.php

require_once('XXXXXXXXXXXXXXXX');
mysqli_select_db(XXXXXXXXXXXXXXX);
mysqli_set_charset(XXXXXXXXXXXXX);

if (isset($_GET['hid'])) {
    $hid=$_GET['hid'];
}

if (isset($_GET['room_id'])) {
    $room_id=$_GET['room_id'];
}

if (isset($_GET['date'])) {
    $date=$_GET['month'];
}

$sql = "SELECT avail FROM $hid WHERE room = $room_id AND date = $date LIMIT 1;";
$result = mysqli_query($conn, $sql);
$avail = (mysqli_num_rows($result) ? false : true);

echo $avail;
?>

这会在客户端中设置每个日期选择器，当 beforeShowDay 运行时，它将每天（35 天）通过对 PHP 脚本的 GET 命令检查可用性。如果当天有空房，PHP 脚本将 return true 或 false。日期选择器将显示从明天开始的日历。只能选择可用的日期。

希望对您有所帮助。

Answer 2

问题出在testcalendar.php，这是包含日历的文件。它包括一个 .虽然我知道 id 必须是唯一的，但当我多次将文件插入到父文件中时，我没有意识到我违反了该规则。特别是因为它只是在页面向下而不是向上工作时出现问题。

解决方案是将 div 更改为

<div id="calendar<?php echo $room_id ?>">

和jquery到

对应的行

$('#calendar<?php echo $room_id ?>').datepicker({

Jquery UI 日期选择器日历未按预期工作

Jquery UI Datepicker Calendar Not Working As Expected

jquery

jquery-ui

jquery-ui-datepicker