Hi John,

Nightmare.  Yes, that sums up trying to black out / activate only certain dates using a Forms datepicker nicely.

We have spent countless hours banging our heads against this particular wall, as well as utilizing the services of someone who DOES know javascript quite well.  Ultimately, we ended up just creating a custom date field out of a single-line field and storing code for it on the server.

You might have a little bit better luck with your approach, using a small-ish subset of days that ARE available and disabling everything else.  One important thing to know about working with these date pickers is they tend to get reset every time you turn you back (and random times when you did nothing at all).  To combat that, you have to constantly be re-establishing your valid dates.

Based on some of my earlier work and your scenario, I put together the code snippet below.  It more or less works; you can be the judge.  The main things to note about this include:

• I created a lookup rule to store the data in a dropdown that I call "Available Dates" - you'll see that field referenced in the code below.
• The ugly setTimeout function - For some reason I COULD NOT get the 'lookupcomplete' event listener to trigger for the starting load on this simple Form, so I just wait a bit then go.  It's important for you to know, however, that even if I did trigger this off the lookup event, I would still have added a setTimeout.  They're ugly, and I hate to use them, but I have seen too many times where the listener event triggered before the data finished loading / populating.
• There is no parsley validation.  I've had issues with trying to add validation like that, so I bypassed it by making the field required and clearing the value if an invalid date is entered.  Feel free to do it a different way.

Without further ado, here's another long code snippet that may or may not be helpful to you:
 

// set available dates in the datepicker of the field passed as a parameter
function setAvailableDates($field, availableDates){
  //set variables
  var today = new Date();
  today.setHours(0,0,0,0); // sets date to midnight so it will properly evaluate
  var oneYear = new Date();
  oneYear.setFullYear(oneYear.getFullYear() + 1);
  
  // set the min and max attributes on the date field
  $field.attr('min',today.toISOString().split('T')[0]);
  $field.attr('max',oneYear.toISOString().split('T')[0]);

  // Set beforeShowDay option to grey out unavailable dates
  $field.datepicker('option','beforeShowDay', function(date) {
    // if date < today or not in the list of available dates
    if (date < today || availableDates.indexOf(date.toLocaleDateString()) < 0){
      return [false, "date unavailable", ''];
    }
    else if (availableDates.indexOf(date.toLocaleDateString()) >= 0){
      return [true, '', ''];
    }
  });
};


// Verifies that entered date value is on our list. 
// Takes Date field and available dates array as parameters.
function isValidDate($field, availableDates){
  var selectedDate = $field.val();
  //debugger;
  if (availableDates.indexOf(selectedDate) == -1){
    // clear field value
    $field.val('');
    // call function to disable unavailable dates
    setAvailableDates($field, availableDates);
    // inform user that they need to use a new date
    alert ("Date Unavailable - Unavailable Dates are Greyed Out.\nPlease Choose a New Date");
  };
};

// Main functions
$(document).ready(function(){
  var $dateField = $('li[attr="Limited_Date"] input');
  var availableDates = [];
  
  // pause for a moment (this is ugly, but I've seen many times where this
  // function runs before the field has finished populating
  setTimeout(function(){
    // add available dates from lookup into array
    $('li[attr="Available_Dates"] select option').each(function(){
      if($(this).val() != ''){
        availableDates.push($(this).text());
        // call function to disable unavailable dates
    	setAvailableDates($dateField, availableDates);
      }
    });
    // call function to disable unavailable dates
    setAvailableDates($dateField, availableDates);
  },400);
  
  // reset the beforeShowDate every time the user clicks on the date field
  $dateField.on('click', function(){
    // call function to disable unavailable dates
    setAvailableDates($dateField, availableDates);
  });
  
  // When a date is entered / selected,
  $dateField.on('change', function(){
    // verify that the entered value is a good one
    isValidDate($dateField, availableDates);
  });
  
});