Is it possible to have a datepicker which excludes certain days?
I’m looking for a script which I can set what days a user can select.
Ideally I would like to be able to set a few specific timeslots along with this.
Can anyone give me some pointers with this please.
Thanks for any help in advance.
Here’s a demo: jQuery UI DatePicker: Disable Specified Days
You could easily modify that so that it returns false on all but a couple of allowed days.
Thanks for the link and the quick reply. I’ve tried to get this working even just with the demo from the link and it shows all dates as disabled!! What am I doing wrong with this?
Sorry ignore that last post now have the demo working I think. I’ll have a go at this and see how I get on. Thanks again might need some help in a bit.
Sorry but I’m struggling with this. I’m not very experienced with modifying javascripts. The code I have is below. Would you be able to explain to me how I go about changing this so that it only disables the dates I put in the array?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://davidwalsh.name/dw-content/jquery-ui-css/custom-theme/jquery-ui-1.7.2.custom.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script>
/* create an array of days which need to be disabled */
var disabledDays = ["1-21-2011","1-24-2011","1-27-2011","1-28-2011","1-23-2011","1-17-2011","1-2-2011","1-3-2011","1-4-2011","1-5-2011"];
/* utility functions */
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
for (i = 0; i < disabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
//console.log('bad: ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
return [false];
}
}
//console.log('good: ' + (m+1) + '-' + d + '-' + y);
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = jQuery.datepicker.noWeekends(date);
return noWeekend[0] ? nationalDays(date) : noWeekend;
}
/* create datepicker */
jQuery(document).ready(function() {
jQuery('#date').datepicker({
//minDate: new Date(2010, 0, 1),
//maxDate: new Date(2010, 5, 31),
dateFormat: 'DD, MM, d, yy',
constrainInput: true,
beforeShowDay: noWeekendsOrHolidays
});
});
</script>
</head>
<body>
<input type="text" name="date" id="date" readonly="readonly" size="12" />
</body>
</html>
The existing unchanged demo already does that. The demo disables the dates in the array.
Do you instead want all dates to be disabled except for those in the array?
The demo disables weekends aswell as the dates in the array. How can I get this to show the weekends? Sorry I wasn’t very clear with the last post.
Ahh, that would be this part here.
function noWeekendsOrHolidays(date) {
var noWeekend = jQuery.datepicker.noWeekends(date);
return noWeekend[0] ? nationalDays(date) : noWeekend;
}
The weekend part can be easily removed.
function noHolidays(date) {
return nationalDays(date);
}
and use noHolidays in other parts of the code instead of noWeekendsOrHolidays. That is, if your dates are holidays. If they’re something else, then you should use a more appropriate term, or simplify things by using a more generic description.
Thats great thanks so much for the help with this I really appreciate it. Just so I know incase I want to use it can you show me how I would get the code to only allow the selection of saturdays as everywhere I’ve looked shows you how to disable weekends but I can’t get it to disable weekdays!
All you do is check that the day of the week is a Saturday. The getDay method returns the day of the week, which is a number from 0 to 6 where 0 is Sunday, 1 is Monday, etc.
function onlySaturdays(date) {
return date.getDay() === 6;
}
If that’s the only restriction on the date, you can then set that as the function that the datePicker uses before showing each day.
$(...).datepicker({
...,
beforeShowDay: onlySaturdays
});
Or, if you want to get more flexible, you could extend that onlySaturdays function so that you can choose which days of the week to allow.
function onlyTheseWeekDays(arr) {
var days = [];
if (arr instanceof Array) {
days = arr;
} else if (!isNaN(Number(arr))) {
days.push(arr);
}
return function (date) {
var dayOfWeek = date.getDay(),
i;
for (i = 0; i < days.length; i += 1) {
if (days[i] === dayOfWeek) {
return [true];
}
}
return [false];
}
}
So that you could then use:
$(...).datepicker({
...,
beforeShowDay: onlyTheseWeekDays(6)
});
or
$(...).datepicker({
...,
beforeShowDay: onlyTheseWeekDays([0, 6])
});
or
$(...).datepicker({
...,
beforeShowDay: onlyTheseWeekDays([1, 2, 3, 4, 5])
});
or for some strange reason:
$(...).datepicker({
...,
beforeShowDay: onlyTheseWeekDays([2, 3, 5])
});
Thanks for the help with this but I still can’t get this to work. What am I doing wrong?? I want this date picker to only show Saturdays. I have a list of Saturdays at the top which are already booked. Can you show me what I’m doing wrong please? I can’t even get the date picker to show now when I click the input box!!
Here’s the code I have below:
<script>
/* create an array of days which need to be disabled */
var disabledDays = ["1-1-2011","1-8-2011","1-15-2011"];
function onlyTheseWeekDays(arr) {
var days = [];
if (arr instanceof Array) {
days = arr;
else if (!isNaN(Number(arr))) {
days.push(arr);
}
return function (date) {
var dayOfWeek = date.getDay(),
i;
for (i = 0; i < days.length; i += 1) {
if (days[i] === dayOfWeek) {
return true;
}
}
return false;
}
}
/* create datepicker */
jQuery(document).ready(function() {
jQuery('#date').datepicker({
//minDate: new Date(2010, 0, 1),
//maxDate: new Date(2010, 5, 31),
dateFormat: 'DD, MM, d, yy',
constrainInput: true,
beforeShowDay: onlyTheseWeekDays(6)
});
});
</script>
A right parenthesis is missing from just left of the else if part of the code. Put that in place and the date picker should then show.
Thanks for the reply but now the calender shows and all the dates are unavailable! Sorry for having to ask for so much help with this, I’m really stuck now.
Please provide a link to a test version of the page.
Great, one final tweak. The datepicker function needs to return an array where the first item is true or false.
So, change:
return true;
to
return [true];
and change
return false;
to
return [false];
Excellent, now it shows all saturdays, which is great but how do I get it to not show the ones from the array set at the top?
Let’s now extend what’s happening in the beforeShowDay event.
beforeShowDay: function (date) {
var showDay = onlyTheseWeekDays(6)(date);
if (showDay[0] === true) {
...
}
return showDay;
}
Can you work out what else there should be in the above?
I’ll have a go at it and see how I get on once again thanks for taking the time to help me with this.