Disable / enable selected date range in jQuery datepicker user interface

Question

So I have the following demo, http://dev.driz.co.uk/week.html , which shows the jQuery UI datpicker, which has multiple instances for each month of the year.

I changed it so that the user selects whole weeks, and then the start and end dates for these weeks are stored in the right sidebar with the week number.

I want to disable the dates when the user selected them so that they can see on the calendars which dates were selected (and also do not allow them to add the same date range more than once).

However, I don’t know where to start ... I created some functions for enabling and disabling dates, but I do not know how to actually disable dates using the beforeShowDay method.

For example:

var array = ["2013-03-14","2013-03-15","2013-03-16"] $('.week-picker').datepicker({ beforeShowDay: function(date){ var string = jQuery.datepicker.formatDate('yy-mm-dd', date); return [ array.indexOf(string) == -1 ] } }); 

But how would I turn off the date range? Since I only have start and end dates. And can I call beforeShowDay AFTER the datepicker is on the page, as in my example? And how can I turn on dates again?

Here is the code:

 $(function() { var startDate; var endDate; var selectCurrentWeek = function() { window.setTimeout(function () { $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active'); }, 1); } $('.week-picker').datepicker( { defaultDate: '01/01/2014', minDate: '01/01/2013', maxDate: '01/01/2015', changeMonth: false, changeYear: true, showWeek: true, showOtherMonths: true, selectOtherMonths: true, numberOfMonths: 12, onSelect: function(dateText, inst) { var date = $(this).datepicker('getDate'); startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()); endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6); var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat; addWeek($.datepicker.iso8601Week(new Date(dateText)), $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings )); disableDates( $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings )); selectCurrentWeek(); }, beforeShowDay: function(date) { var cssClass = ''; if(date >= startDate && date <= endDate) cssClass = 'ui-datepicker-current-day'; return [true, cssClass]; }, onChangeMonthYear: function(year, month, inst) { selectCurrentWeek(); } }); $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); }); $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); }); $('.remove').live('click', function(e){ enableDates($(this).attr('data-startdate'), $(this).attr('data-enddate')); $(this).parent('div').remove(); }); }); // adds the week to the sidebar function addWeek(weekNum, startDate, endDate){ $('.weeks-chosen').append('<div data-startdate="'+startDate+'" data-enddate="'+endDate+'"><span class="weekNum">Week '+ (weekNum - 1) +'</span> - <span class="startDate">'+startDate+'</span> - <span class="endDate">'+endDate+'</span> | <span class="remove">X Remove</span></div>'); } // disable the dates on the calendar function disableDates(startDate, endDate){ } // enable the dates on the calendar function enableDates(startDate, endDate){ } 

In short, there are two questions here ... How to disable dates AFTER the datapicker is added to the page. And secondly, how to turn off the range between two dates, since it looks like the beforeShowDay method expects an array of dates, not a range.

Answer 1

But how would I turn off the date range? Since I have only the beginning and end dates.

One way is to create an array of dates based on the start and end dates that you have. Use this array in beforeShowDay to disable the range.

Demo: http://jsfiddle.net/abhitalks/FAt66/1/

For example, the relevant parts of JS:

 var startDate = "2014-06-15", // some start date endDate = "2014-06-21", // some end date dateRange = []; // array to hold the range // populate the array for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) { dateRange.push($.datepicker.formatDate('yy-mm-dd', d)); } // use this array beforeShowDay: function (date) { var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date); return [dateRange.indexOf(dateString) == -1]; } 

Now you can set startDate and endDate whenever a date is selected. In the example script that I linked to above, start and end dates are set whenever a date is selected on the top two inputs. The data array is filled when a date is selected on the second input.

Note The above example is additive, i.e. every time you select a new range, which it adds as disabled dates to the target. If you want to clear an existing disconnected range before specifying a new range, you can do destroy and re-bind the datupick. (And also reset the dateRange array)

Demo 2: http://jsfiddle.net/abhitalks/FAt66/3/

Relevant part of JS:

 $("#dt").datepicker("destroy"); $("#dt").datepicker({ dateFormat : 'yy-mm-dd', beforeShowDay: disableDates }); var disableDates = function(dt) { var dateString = jQuery.datepicker.formatDate('yy-mm-dd', dt); return [dateRange.indexOf(dateString) == -1]; } 

---

Looking at your real code, all you need is:

 onSelect: function(dateText, inst) { var date = $(this).datepicker('getDate'); startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()); endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6); var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat; addWeek($.datepicker.iso8601Week(new Date(dateText)), $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings )); for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) { dateRange.push($.datepicker.formatDate('dd/mm/yyyy', d)); } selectCurrentWeek(); }, beforeShowDay: disableDates, ... 

This will add the newly selected date ranges to the array and will be further activated. But, warn that you will need an evacuation route when the already selected week is deleted. In this case, you can work with several arrays that can be combined into one main array.