title: Disable/Enable selected date range on jQuery datepicker UI
body: <p>So I have the following demo <a href="http://dev.driz.co.uk/week.html">http://dev.driz.co.uk/week.html</a> that shows a jQuery UI datepicker that has multiple instances for each month of the year.</p>
  
  <p>I've modified it so that the user selects entire weeks and then start and end dates for those weeks are stored on the right hand sidebar with a week number.</p>
  
  <p>What I want to do is disable the dates once the user has selected them so they can see on the calender picker what dates have been selected (and also prevent them from adding the same date range more than once).</p>
  
  <p>However I don't know where to start with this... I've created some enable and disable date functions but don't know how to actually disable the dates using the beforeShowDay method.</p>
  
  <p>For example:</p>
  
  <pre><code>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 ]
      }
  });
  </code></pre>
  
  <p>But how would I disable a range of dates? As I only have the start and end dates. And can I call the beforeShowDay AFTER the datepicker is on the page like in my example? AND how can I then re-enable the dates?</p>
  
  <p>Here's the code:</p>
  
  <pre><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 &gt;= startDate &amp;&amp; date &lt;= 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('&lt;div data-startdate="'+startDate+'" data-enddate="'+endDate+'"&gt;&lt;span class="weekNum"&gt;Week '+ (weekNum - 1) +'&lt;/span&gt; - &lt;span class="startDate"&gt;'+startDate+'&lt;/span&gt; - &lt;span class="endDate"&gt;'+endDate+'&lt;/span&gt; | &lt;span class="remove"&gt;X Remove&lt;/span&gt;&lt;/div&gt;');
  
  }
  
  // disable the dates on the calendar
  function disableDates(startDate, endDate){
  
  
  }
  
  // enable the dates on the calendar
  function enableDates(startDate, endDate){
  
  
  }
  </code></pre>
  
  <p><strong>In short there are two questions here... How do I disable dates AFTER the datepicker is added to the page. And second how do I disable a range between two dates, as it looks like the beforeShowDay method expects an array of dates rather than a range.</strong></p>