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...