jquery datepicker beforeshowday marking me in red booked days but only of current month

Question

while I get a correct json response of all the dates booked (I have the correspoding code in the Controller that calculates the dates in between the start and end date) like this:

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

Only the dates of current month (September) are being marked in red. The dates of October, although booked dont get to be marked in red. There are 2 code snippets similar, but one is to fetch the dates booked (done via ajax upon page loading, and then another which responds to a button in order to Add dates to be booked)

In the code here, the "myDate" is supposed to be the running dates of the Datepicker being sent to the beforeshowday function, but it seems it only sends those of September, so the rest does not get to be compared with my baddates, that is, booked days returned in (data).

Yes, the documentation on "beforeshowday" says:

"The function is called for each day in the datepicker before it is displayed. So the function will be called only for the days to be displayed."

Indeed, I can imagine that jquery automatically can see what month is being displayed and then sends all of the days of that month to be compared against the json array of booked dates. Being this so, why is not sending October when I open that calendar month?

(There is some "superfluous" snippet in the code as "bookedperiods" is a route for a controller that does not have the method since I noticed it was unnnecesary. )

This can be seen live here:

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>

Arun P Johny Arun P Johny · Accepted Answer · 2015-09-29T11:24:57

The problem is date format in the array, since you have used dd MM yy for $checkdate, its date value will be 0 prefixed like 01 for first which is not matching with the array

$checkdate = $.datepicker.formatDate('dd MM yy', mydate);

You can also simplify the checkdate implementation as below

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" />

jquery datepicker beforeshowday marking me in red booked days but only of current month

1 Answers