The jQuery UI DatePicker widget has a built in function for selecting all days that aren’t weekends. As we can see here starting on line 910 (as of this writing) of jquery.ui.datepicker.js.
/* Set as beforeShowDay function to prevent selection of weekends.
@param date Date - the date to customize
@return [boolean, string] - is this date selectable?, what is its CSS class?
*/
noWeekends: function(date) {
var day = date.getDay();
return [(day > 0 & day < 6), ''];
}
We can provide the noWeekends function into the beforeShowDay event which will calculate all the weekdays and provide an array of true/false values indicating whether a date is selectable.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/overcast/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body style="font-size: 67.5%">
<input id="datepicker" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker({
beforeShowDay: $.datepicker.noWeekends
});
});
</script>
</body>
</html>
Image may be NSFW.
Clik here to view.
I don’t see the noWeekends Utility function documented anywhere so I submitted a ticket and I’ll see about getting that taken care of.
Update: I’ve taken care of the documentation and it now shows up on the datepicker page.
The post Prevent users from selecting weekends in jQuery UI’s DatePicker appeared first on Ralph Whitbeck.
