jquery datepicker beforeshowday 将我标记为红色预订日，但仅限本月答案

【问题标题】：jquery datepicker beforeshowday marking me in red booked days but only of current monthjquery datepicker beforeshowday 将我标记为红色预订日，但仅限本月
【发布时间】：2015-09-29 11:08:10
【问题描述】：

虽然我得到了所有预订日期的正确 json 响应（我在控制器中有相应的代码，用于计算开始日期和结束日期之间的日期），如下所示：

["30 September 2015","1 October 2015","2 October 2015","3 October 2015"]

只有当月（9 月）的日期被标记为红色。 10 月的日期虽然已预订，但不会被标记为红色。有 2 个类似的代码 sn-ps，但一个是获取预订的日期（在页面加载时通过 ajax 完成，然后另一个响应按钮以添加要预订的日期）

在这里的代码中，“myDate”应该是发送到 beforeshowday 函数的 Datepicker 的运行日期，但它似乎只发送 9 月的那些，所以其余的不能与我的比较baddates，即在（数据）中返回的预订天数。

是的，“演出前”的文档说：

"在日期选择器中每天调用该函数，然后再显示。所以这个函数只会在要显示的天数内被调用。”

确实，我可以想象 jquery 可以自动查看正在显示的月份，然后发送该月的所有日期以与预订日期的 json 数组进行比较。既然如此，为什么我打开那个日历月时不发送 10 月？

（代码中有一些“多余的”sn-p，因为“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>

【问题讨论】：

标签： jquery datepicker

【解决方案1】：

问题是数组中的日期格式，因为您使用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" />

【讨论】：