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:
- 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. - Inside
onSelect
, check if the selected range includes any of the dates in the array and act accordingly - Then In the
class:date
array, you can add anyclass:date
you desire to be disabled with its own class, and the code will handle it
Full working solution here.
Notes:
- The code disables the 22nd of April and the 15th of May (try playing with the dates)
- The code gives a special class to the 15th of April and the 10th of May.
- The css class is applies as a
background-color
on thetd
, it does't show properly, you will have to modify the picker's css for it to do - Reference that hepled me provide this answer is here