Change jQuery daterange picker to disallow a date range if it contains disabled dates

Question

I have created a jQuery date range picker. I am able to select the dates ranges and show them in a textbox. Now what I need is, I need to disable certain dates and assign different classes to those dates.

E.g. I must be able to give class A to April 2, class B to April 4 etc.

I have tried the results I got while I googled but nothing helped. What I am trying to do is to pass some dates and classes that should be assigned to those dates. That class should be assigned to those dates plus I must have option to enable or disable those dates.

The next thing I am trying to do is if there is a disabled date in between 2 dates, then that range cannot be selected.

E.g. Suppose I want to select April 2 to April 7 and April 5 is a disabled date. 
Then I could be able to select either April 2 to April 4 or April 6 to April 7.

That means only one range should be selectable. Please help to solve this.

Please find the fiddle here:

Answer 1

You have to create two arrays, one that maps the css Class with each Date you want to be disabled class:date, and one that maps the css class with the date you want to give a special class, and then:

1. Inside beforeShowDay, check if the date is in the disabled dates array, and if you find it, use the associated class and return false, example: [false,"classA"], if not , check in the special array and return the class with true, else just do whatever you are doing right now.
2. Inside onSelect, check if the selected range includes any of the dates in the array and act accordingly
3. Then In the class:date array, you can add any class:date you desire to be disabled with its own class, and the code will handle it

Full working solution here.

Notes:

1. The code disables the 22nd of April and the 15th of May (try playing with the dates)
2. The code gives a special class to the 15th of April and the 10th of May.
3. The css class is applies as a background-color on the td, it does't show properly, you will have to modify the picker's css for it to do
4. Reference that hepled me provide this answer is here

Answer 2

You need to implement beforeShowDay and onSelect functions as shown in the following demo:

http://jsfiddle.net/salman/H3ra3/

The code may look daunting but it is not. The basics are as follows:

The dateConfig variable

The date information is stored in an associative array in which we store whether a date is selectable AND/OR its CSS class name.

beforeShowDay

Let date be the date for which the function was called
Let date1 be the date inside start date textbox
Let date2 be the date inside end date textbox

• If the date is unselectable then
  return [false, date_class or ""]
• If user has chosen date1
  • If user has chosen date2 and date is between date1 ...date2 then
    return [true, selected_class]
  • If date is less than date1 then
    return [false, date_class or ""] (do not allow second date to be less than first date)
  • If date is equal to date1 then
    return [true, selected_class] (allow second date to be same as first)
  • return [true, date_class or ""]

onSelect

Let date1 be the date inside start date textbox Let date2 be the date inside end date textbox

• If user has chosen date1 and date2 then
  • Iterate over all unselectable dates
  • If an unselectable date is between date1 ...date2 then throw an error