JSFiddle - React, Tailwind, and code Playground

by Marius Jopen

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() {
  dates = [{
    "dates": "15-08-2017"
  }, {
    "dates": "16-08-2017"
  }, {
    "dates": "17-08-2017"
  }, {
    "dates": "18-08-2017"
  }];
  $("#datepicker").datepicker({
    dateFormat: 'dd-mm-yy',
    beforeShowDay: checkAvailability
  });
});

function checkAvailability(mydate) {
  var myBadDates = dates;
  var $return = true;
  var $returnclass = "available";

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

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