In a previous post I showed how to add a jQuery date picker to a form, a great feature if you are setting up a form for reservations, a delivery service, etc. By default the calendar allows you to choose any date in the past or the future. This might not be the most ideal setup however, usually you wouldn’t want people to have the ability to choose dates in the past if they are reserving a room, scheduling a delivery, etc. I was recently setting up a calendar where the company needed people to only have the ability to choose a date from the present day forward, and also they couldn’t choose Sundays (the company didn’t deliver on Sundays). These are both rather easy to setup, I’ll show you how below.
Example 1. Standard jQuery Date Picker
Use the code below to create this example:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<form>
<input id="datepicker" />
</form>
</body>
</html>
Example 2. Only Present Day Forward Allowed
Use the code below to create this example:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#datepicker').datepicker({
minDate: 0,
});
});
</script>
</head>
<body>
<form>
<input id="datepicker" />
</form>
</body>
</html>
Example 3. jQuery Date Picker with No Sundays Allowed
Use the code below to create this example:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#datepicker').datepicker({
beforeShowDay: noSunday
});
function noSunday(date){
var day = date.getDay();
return [(day > 0), ''];
};
});
</script>
</head>
<body>
<form>
<input id="datepicker" />
</form>
</body>
</html>
Example 4. Only Present Day Forward Allowed & No Sundays Allowed
Use the code below to create this example:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#datepicker').datepicker({
minDate: 0,
beforeShowDay: noSunday
});
function noSunday(date){
var day = date.getDay();
return [(day > 0), ''];
};
});
</script>
</head>
<body>
<form>
<input id="datepicker" />
</form>
</body>
</html>
