Jquery UI Datepicker 日历未按预期工作
Posted
技术标签:
【中文标题】Jquery UI Datepicker 日历未按预期工作【英文标题】：Jquery UI Datepicker Calendar Not Working As Expected 【发布时间】：2019-10-29 07:53:58 【问题描述】：我有一个包含酒店房间列表的页面。每个房间都有一个打开可用性日历的链接。我发现如果我点击第一个房间，日历会正确显示。但是列表下方的链接会打开文件而不是日历。如果我从底部开始向上工作，它们都会正确打开。
以非常简化的形式，这是带有列表的页面：
<!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>
在日历失败的情况下，会显示标题（“测试日历 - 1136”），所以我知道我可以正常访问该文件。因此，大概是脚本末尾的东西，但我就是看不到问题。
【问题讨论】：
我想我明白你在做什么，但我不知道这是一个好方法。正如我所看到的，您有一个图标，当用户单击它时，应该会出现一个日历，显示可用于预订的日期。目前，您正在尝试从 PHP 加载新的 HTML。当您直接导航到加载目标时，它是否正确加载？我会考虑对您的 PHP 进行 AJAX 调用，返回 JSON 或等待日期选择器可以在beforeShowDate 中使用的数据数组。或者它可以每次调用 PHP 并检查单个日期。
【参考方案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 运行时，它将通过 PHP 脚本的 GET 命令每天（35 天）检查可用性。如果当天房间可用，PHP 脚本将返回 true 或 false。日期选择器将显示从明天开始的日历。仅可选择可用的日期。
希望这会有所帮助。
【讨论】：
感谢 Twisty。这似乎涉及撕毁我所做的一切并重新开始，而且我很难理解你的代码。所以我又挖了一些，找到了一个对我现有代码进行简单更改的解决方案。也许对其他人来说很明显，但对我来说并不明显我得到了同一个 id 的多个实例，这就是导致问题的原因。 @TrapezeArtist 好的，我知道这可能是个问题。【参考方案2】：问题在于 testcalendar.php，它是包含日历的文件。它包括一个 .虽然我知道 id 必须是唯一的，但当我将文件多次插入父文件时，我没有意识到我违反了该规则。特别是因为它只是在页面向下而不是向上时出现问题。
解决方案是将 div 更改为
<div id="calendar<?php echo $room_id ?>">
和jquery对应的行来
$('#calendar<?php echo $room_id ?>').datepicker(
【讨论】：
以上是关于Jquery UI Datepicker 日历未按预期工作的主要内容，如果未能解决你的问题，请参考以下文章
使用 jQuery UI datepicker 选择日历更改 URL