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.
<?php require_once('inc/header.php'); Connect to the database using PDO and use prepare to input the data. All working fine.
require('database.php'); $stmt = $db->prepare("INSERT INTO besucher (name, surname, email, guests, fromDate, toDate, questions) VALUES (?, ?, ?, ?, ?, ?, ?)"); $stmt->bindParam('1', $_POST['Name']); $stmt->bindParam('2', $_POST['LastName']); $stmt->bindParam('3', $_POST['Email']); $stmt->bindParam('4', $_POST['Guests']); $stmt->bindParam('5', $_POST['From']); $stmt->bindParam('6', $_POST['To']); $stmt->bindParam('7', $_POST['Questions']); $stmt->execute(); This is where I retrieve the info from the database.
try { $results = query("SELECT fromDate, toDate FROM besucher"); } catch (Exception $e) { echo "Data could not be retrieved from the database."; exit; } ?> The form itself.
<!-- Begin page content --> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="page-header"> <h1>Make a booking enquiry</h1> </div> </div> </div><!--endrow--> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form role="form action="form.php" method="post"> <div class="form-group"> <label for="Name">First Name</label> <input type="text" class="form-control" id="Name" name="Name" placeholder="Enter First Name" required> </div> <div class="form-group"> <label for="LastName">Surname</label> <input type="text" class="form-control" id="LastName" name="LastName" placeholder="Enter Surname" required> </div> <div class="form-group"> <label for="Email">Email</label> <input type="email" class="form-control" id="Email" name="Email" placeholder="Enter Email" required> </div> <div class="form-group"> <label for="Guests">Number of Guests</label> <input type="number" id="Guests" class="form-control" name="Guests" placeholder="z.b. 4" required> </div> <div class="form-group"> <label for="From">From <span class="glyphicon glyphicon-calendar"></span></label> <input type="text" id="From" name="From" class="form-control" required> </div> <div class="form-group"> <label for="To">To <span class="glyphicon glyphicon-calendar"></span></label> <input type="text" id="To" name="To" class="form-control" required> </div> <div class="form-group"> <label for="textarea">Questions?</label> <textarea class="form-control" id="textarea" name="Questions" rows="3"></textarea> </div> <div class="form-group"> <label for="checkbox" class="sr-only">Checkbox</label> <input id="checkbox" type="checkbox"> I would like to recieve emails from Muscheltraum </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div><!--endrow--> </div><!--container--> </div><!--wrap--> <?php require_once('inc/footer.php'); ?> 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.
From the Jquery UI API
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 ); } }); }); 
