Jquery datepicker beforeshowday标记我在红色预订的日子,但只有当前月份



当我得到所有预订日期的正确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" />

最新更新