title: How to disable dates in Datepicker using dates entered into database?
body: <p>What I want to achieve is to block out dates in the Jquery Datepicker that have already been booked. So far I have managed to build a working form with a functioning Datepicker that uses $_POST to send data to my database. I know that I should be using the BeforeShowDay Jquery function but I can't quite figure out how to implement it. Let me walk you through my code. </p>
  
  <pre><code>&lt;?php require_once('inc/header.php');
  </code></pre>
  
  <p>Connect to the database using PDO and use prepare to input the data. All working fine. </p>
  
  <pre><code>require('database.php');
  
  $stmt = $db-&gt;prepare("INSERT INTO besucher (name, surname, email, guests, fromDate, toDate, questions) VALUES (?, ?, ?, ?, ?, ?, ?)");
  $stmt-&gt;bindParam('1', $_POST['Name']);
  $stmt-&gt;bindParam('2', $_POST['LastName']);
  $stmt-&gt;bindParam('3', $_POST['Email']);
  $stmt-&gt;bindParam('4', $_POST['Guests']);
  $stmt-&gt;bindParam('5', $_POST['From']);
  $stmt-&gt;bindParam('6', $_POST['To']);
  $stmt-&gt;bindParam('7', $_POST['Questions']);
  $stmt-&gt;execute();
  </code></pre>
  
  <p>This is where I retrieve the info from the database. </p>
  
  <pre><code>    try {
          $results = query("SELECT fromDate, toDate FROM besucher");
  
      } catch (Exception $e) {
          echo "Data could not be retrieved from the database.";
          exit;
      }
  
  ?&gt;
  </code></pre>
  
  <p>The form itself. </p>
  
  <pre><code>&lt;!-- Begin page content --&gt;
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6 col-md-offset-3"&gt;
        &lt;div class="page-header"&gt;
        &lt;h1&gt;Make a booking enquiry&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;&lt;!--endrow--&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6 col-md-offset-3"&gt;
        &lt;form role="form action="form.php" method="post"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="Name"&gt;First Name&lt;/label&gt;
            &lt;input type="text" class="form-control" id="Name" name="Name" placeholder="Enter First Name" required&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="LastName"&gt;Surname&lt;/label&gt;
            &lt;input type="text" class="form-control" id="LastName" name="LastName" placeholder="Enter Surname" required&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="Email"&gt;Email&lt;/label&gt;
            &lt;input type="email" class="form-control" id="Email" name="Email" placeholder="Enter Email" required&gt;
          &lt;/div&gt;    
          &lt;div class="form-group"&gt;
            &lt;label for="Guests"&gt;Number of Guests&lt;/label&gt;
            &lt;input type="number" id="Guests" class="form-control" name="Guests" placeholder="z.b. 4" required&gt;
          &lt;/div&gt;        
          &lt;div class="form-group"&gt;
            &lt;label for="From"&gt;From &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;&lt;/label&gt;
            &lt;input type="text" id="From" name="From" class="form-control" required&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;     
            &lt;label for="To"&gt;To &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;&lt;/label&gt;
            &lt;input type="text" id="To" name="To" class="form-control" required&gt;      
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="textarea"&gt;Questions?&lt;/label&gt;
            &lt;textarea class="form-control" id="textarea" name="Questions" rows="3"&gt;&lt;/textarea&gt;             
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="checkbox" class="sr-only"&gt;Checkbox&lt;/label&gt;
            &lt;input id="checkbox" type="checkbox"&gt; I would like to recieve emails from Muscheltraum              
          &lt;/div&gt;
          &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;     
      &lt;/div&gt;
    &lt;/div&gt;&lt;!--endrow--&gt;
  &lt;/div&gt;&lt;!--container--&gt;
  &lt;/div&gt;&lt;!--wrap--&gt;
  
  &lt;?php require_once('inc/footer.php'); ?&gt;
  </code></pre>
  
  <p>This is the datepicker.js file code where I want to put the BeforeShowDay function. Unfortunately, I don't know how to get the fromDate and toDate from my SELECT query into my date-picker and how that would fit into the below code. It's really frustrating because I know exactly what I want to do and how the pieces should fit together but I just can't work how to implement it.  </p>
  
  <p>From the Jquery UI API </p>
  
  <pre><code>beforeShowDayType: Function( Date date )
  
  Default: null
  A function that takes a date as a parameter and must return an array with:
  [0]: true/false indicating whether or not this date is selectable
  [1]: a CSS class name to add to the date's cell or "" for the default presentation
  [2]: an optional popup tooltip for this date
  The function is called for each day in the datepicker before it is displayed.
  
  
  
  
      $.datepicker.setDefaults( $.datepicker.regional[ "de" ] );
  
      $(function() {
        $( "#From" ).datepicker({
          dateFormat: "yy-mm-dd",
          changeMonth: true,
          numberOfMonths: 1,
          gotoCurrent: true,
          minDate:0,
          maxDate: "+1y", 
          onClose: function( selectedDate ) {
            $( "#To" ).datepicker( "option", "minDate", selectedDate );
          }
        });
        $( "#To" ).datepicker({
          dateFormat: "yy-mm-dd",
          changeMonth: true,
          numberOfMonths: 1,
          gotoCurrent: true,
          maxDate: "+1y",
          onClose: function( selectedDate ) {
            $( "#From" ).datepicker( "option", "maxDate", selectedDate );
          }
        });
      });
  </code></pre>