当我得到所有预订日期的正确json响应时(我在控制器中有相应的代码,用于计算开始日期和结束日期之间的日期),如下所示:
["30 September 2015","1 October 2015","2 October 2015","3 October 2015"]
只有当月(9月)的日期被标记为红色。10月的日期,虽然已经预定,但不能用红色标记。有2个类似的代码片段,但一个是获取预订的日期(通过ajax在页面加载时完成,然后另一个响应按钮,以便添加要预订的日期)
在这里的代码中,"myDate"应该是发送给beforeshowday函数的Datepicker的运行日期,但它似乎只发送9月份的日期,所以其余的不能与我的日期进行比较,也就是(data)中返回的预订日期。
是的,"beforeshowday"的文档说:
"在显示日期之前,该函数在日期选择器中每天被调用。因此,该函数将只在要显示的日期被调用。"
的确,我可以想象jquery可以自动查看显示的月份,然后发送该月的所有天数与预订日期的json数组进行比较。既然如此,为什么不发送十月份当我打开日历月?
(代码中有一些"多余"的片段,因为"bookedperiods"是一个没有方法的控制器的路由,因为我注意到它是不必要的。)
可以在这里看到:
http://chefvillas.com/detailsproperty/36<script>
jQuery(document).ready(function(){
$(function() {
var startdate = $('#start_date').val();
var owner =36;
var user = 24;
var enddate = $('#end_date').val();
$url = '{{URL::route('bookedperiods')}}';
$.post($url, {
arrival: startdate,
departure: enddate,
user_id: owner,
booked_by: user
}, function hola (data) {
$('#test').text(data);
$myBadDates = (data);
});
$("#start_date, #end_date").datepicker({
dateFormat: 'dd MM yy',
numberOfMonths: 2,
beforeShowDay: checkBadDates
});
});
function checkBadDates(mydate){
var $return=true;
var $returnclass ="available";
$checkdate = $.datepicker.formatDate('dd MM yy', mydate);
for(var i = 0; i < $myBadDates.length; i++)
{
if($myBadDates[i] == $checkdate)
{
$return = false;
$returnclass= "unavailable";
}
}
return [$return,$returnclass];
}
$('#botoncalendario').click(function(){
var startdate = $('#start_date').val();
var owner =36;
var user = 24;
var enddate = $('#end_date').val();
$url = '{{URL::route('reservations')}}';
$.post($url, {
arrival: startdate,
departure: enddate,
user_id: owner,
booked_by: user
}, function hola (data) {
$('#test').text(data);
});
});
});
</script>
问题是数组中的日期格式,由于您已将dd MM yy
用于$checkdate
,其日期值将是0
前缀,如01
,首先与数组
$checkdate = $.datepicker.formatDate('dd MM yy', mydate);
您还可以简化校验日期的实现,如下所示
jQuery(function($) {
var $myBadDates = ["30 September 2015", "1 October 2015", "2 October 2015", "3 October 2015"];
$("#start_date, #end_date").datepicker({
dateFormat: 'dd MM yy',
numberOfMonths: 2,
beforeShowDay: checkBadDates
});
function checkBadDates(mydate) {
var $return = true,
$returnclass = "available",
$checkdate = $.datepicker.formatDate('d MM yy', mydate);
if ($myBadDates.indexOf($checkdate) > -1) {
$return = false;
$returnclass = "unavailable";
}
return [$return, $returnclass];
}
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<input id="start_date" />
<input id="end_date" />