jQuery UI Datepicker日历无法按预期工作

时间：2019-06-14 16:38:16

标签： jquery jquery-ui jquery-ui-datepicker

我在页面上列出了一些酒店客房。每个房间都有一个打开可用性日历的链接。我发现如果单击第一个房间，日历将正确显示。但是，列表下方的链接会打开文件，但不会打开日历。如果我从底部开始向上工作，它们都可以正确打开。

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

<!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”），因此我知道我可以正常访问该文件。因此，大概这是脚本结尾处的内容，但是我看不到问题所在。

2 个答案:

答案 0 :(得分：0)

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

$(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时，它将通过PHP脚本的GET命令每天（35天）检查可用性。如果当天有空房间，PHP脚本将返回true或false。日期选择器将显示明天以后的日历。只能选择可用的日期。

希望这会有所帮助。

答案 1 :(得分：0)

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

解决方案是将div更改为

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

和对应的jquery行

$('#calendar<?php echo $room_id ?>').datepicker({
相关问题
最新问题