Skip to content

Instantly share code, notes, and snippets.

@jhoughtelin

jhoughtelin/jQuery UI Date Selector Disabled Dates

Last active August 29, 2015 14:20
Show Gist options
  • Save jhoughtelin/527aafdfd163bc684f42 to your computer and use it in GitHub Desktop.
Save jhoughtelin/527aafdfd163bc684f42 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery UI Date Selector Disabled Dates
Raw
jQuery UI Date Selector Disabled Dates
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet">
<script type="text/javascript">
jQuery(document).ready(function () {
var disabledDays = ["5-10-2015", "5-11-2015", "5-12-2015", "6-10-2015", "7-10-2015", "8-10-2015"];
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if (jQuery.inArray((m + 1) + '-' + d + '-' + y, disabledDays) != -1 || new Date() > date) {
console.log('bad: ' + (m + 1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
return [false];
}
}
return [true];
}
jQuery(".dp").datepicker({
dateFormat: 'mm/dd/yy', minDate: 4, constrainInput: true,
beforeShowDay: nationalDays
});
});
</script>
</head>
<body>
<input type="text" class="dp">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment