Implementing an AJAX-enabled datepicker
For our final datepicker example, we'll work a little magic into the mix and create a datepicker, which will communicate with a remote server to see if there are any dates that cannot be selected. These dates will then be styled as such within the datepicker widget.
Change the <body> of datepicker24.html, so that it contains the following markup:
<div id="bookingForm" class="ui-widget ui-corner-all">
<div class="ui-widget-header ui-corner-top">
<h2>Booking Form</h2>
</div>
<div class="ui-widget-content ui-corner-bottom">
<label for "date">Appointment date:</label>
<input id="date">
</div>
</div>
<script>
$(document).ready(function($){
var months = [], days = [], x;
$.getJSON("http://www.danwellman.co.uk/bookedDates.php?
jsoncallback=?", function(data) {
for (x = 0; x < data.dates.length; x++) {
months.push(data.dates[x...