JSFiddle - React, Tailwind, and code Playground

by gregborbonus

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 Date:
<input type="text" id="datepicker">

JavaScript

$(function() {
  //ajax call better placed here.
id='TEST'; // don't want undefined for the ajax call
  $.getJSON('checkDates.php?dld=' + id, function(json) {
    dates = json;

   console.log('got Ajax');
    $("#datepicker").datepicker({
      dateFormat: 'dd-mm-yy',
      beforeShowDay: checkAvailability

    });
  }).fail(function() {
     console.log('Failed to get ajax');
   // Make datepicker available with all days, because the url failed.
       $("#datepicker").datepicker({
      dateFormat: 'dd-mm-yy',

    });
  });


});



function checkAvailability(mydate) {


  var myBadDates = dates;

  var $return = true;
  var $returnclass = "available";
  $checkdate = $.datepicker.formatDate('dd-mm-yy', mydate);
  //Here we do a quick indexOf check


  // start loop


  for (var x in myBadDates) {
    console.log(x);
    if (myBadDates[x].dates == $checkdate) {
      $return = false;
      $returnclass = "unavailable";
    }



  } //end loop



  return [$return, $returnclass];
}