jQuery UI: AJAX JSON Datepicker


jQuery UI AJAX JSON Datepicker Tutorial. we'll work a little AJAX magic into the mix and create a datepicker. This datepicker prior to opening, will communicate with a server to see if there are any dates that cannot be selected.

Try this code. Save as "date.html"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css">
<style type="text/css">
.ui-datepicker .preBooked_class { background:#111111; }
.ui-datepicker .preBooked_class span { color:#999999; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Datepicker</title>
<script type="text/javascript" src="development-bundle/jquery-1.4.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>

<script type="text/javascript">
	$(function(){
		var months = [], days = [];
		$.getJSON("server.php?jsoncallback=?",
			function(data) {
			for (x = 0; x < data.dates.length; x++) {
			months.push(data.dates[x].month);
			days.push(data.dates[x].day);
			}
		});
		
		function addDates(date){
			if (date.getDay() == 0 || date.getDay() == 6) {
				return [false, ""];
			}
			for (x = 0; x < days.length; x++) {
				if (date.getMonth() == months[x] - 1 &&
					date.getDate() == days[x]) {
					return [false, "preBooked_class"];
				}
			}
			return [true, ""];
		}
		
		var pickerOpts = {
			beforeShowDay: addDates,
			minDate: "+1"
		};
		$("#date").datepicker(pickerOpts);
	});
</script>
</head>
<body>
<input id="date">
</body>
</html>

we add the script that will configure and control the widget

	$(function(){
		var months = [], days = [];
		$.getJSON("server.php?jsoncallback=?",
			function(data) {
			for (x = 0; x < data.dates.length; x++) {
			months.push(data.dates[x].month);
			days.push(data.dates[x].day);
			}
		});
		
		function addDates(date){
			if (date.getDay() == 0 || date.getDay() == 6) {
				return [false, ""];
			}
			for (x = 0; x < days.length; x++) {
				if (date.getMonth() == months[x] - 1 &&
					date.getDate() == days[x]) {
					return [false, "preBooked_class"];
				}
			}
			return [true, ""];
		}
		
		var pickerOpts = {
			beforeShowDay: addDates,
			minDate: "+1"
		};
		$("#date").datepicker(pickerOpts);
	});

The first part of our script initially declares two empty arrays, and then performs an AJAX request to obtain the JSON object from a PHP file.

Each of these sub-objects contain month and day properties representing one date that should be made unselectable. The months or days array are populated with the values from the JSON object for use later in the script

Our function first checks to see whether the day portion of the current date is equal to either 0 (for Sunday) or 6 (for Saturday). If it is, we return false as the first item in the array to make weekends unselectable

we'll also need a little custom styling

.ui-datepicker .preBooked_class { background:#111111; }
.ui-datepicker .preBooked_class span { color:#999999; }

Now, create JSON from PHP file. Save as "server.php".

<?php
header('Content-type: application/json');
$dates = "({
'dates':[
{'month':9,'day':29},
{'month':9,'day':30}
]})";
$response = $_GET["jsoncallback"] . $dates;
echo $response;
?>
jQuery UI Ajax JSON Datepicker Tutorial


Bookmark and Share Tag: jQuery, JavaScript, JavaScript Framework, User Interface Category: JavaScript Post : September 22nd 2010 Read: 6,827

blog comments powered by Disqus