jQuery Datepicker - add class to the first and the last date of a selected range

Question

I'm using jQuery Date picker http://keith-wood.name/datepick.html

Here is html input for datepicker call:

<input type="text" class="date-picker-input" placeholder="dd/mm/yyyy - dd/mm/yyyy ">

This is my jquery code for datepicker initialization:

 $('.date-picker-input').datepick({ 
        rangeSelect: true, 
        dateFormat: 'dd/mm/yyyy',
        changeMonth: false,
        prevText: '<',
        nextText: '>',
        showOtherMonths: true,
        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        showTrigger: '#calImg',
     });
  });

I'm using range option, and i want to add class to the first and last date of selected range in order to stylize them. The dates inside a range have already had .datepick-selected class, but they are inside < td > elements so i must point them via jquery. This is what i tried in order to generate class:

$('.datepick-month .datepick-selected:first, .datepick-month .datepick-selected:last').addClass('selected');

But nothing happened.

How it currently looks

How I want it to look

Answer 1

UPDATED

the only way to do that (for me) is to add a spy which checks if some class (datepick-popup) is present in DOM (simulate the open event which doesnt exist in the plugin):

    var lapse = setInterval( checkIfpickerIsOpened, 300); //you could adjust the time
    
    function checkIfpickerIsOpened(){
       if($(".datepick-popup").length > 0){
         $(".datepick-popup .datepick-selected:first, .datepick-popup .datepick-selected:last").addClass("selected");
         clearInterval(lapse);
       }
    }
   
   $('.date-picker-input').datepick({ 
        rangeSelect: true, 
        dateFormat: 'dd/mm/yyyy',
        changeMonth: false,
        prevText: '<',
        nextText: '>',
        showOtherMonths: true,
        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        onClose: Close,
        showTrigger: '#calImg'
  });

   function Close(){
     lapse = setInterval( checkIfpickerIsOpened, 100);      
  } 

to see the result, you could add a css:

.selected {
  background-color:red !important;// *important* is needed to override default color
}

i have found an hidden even onShow so its functional when we had some timeout to wait the different items of datepicker appear.

   $('.date-picker-input').datepick({ 
        rangeSelect: true, 
        dateFormat: 'dd/mm/yyyy',
        changeMonth: false,
        prevText: '<',
        nextText: '>',
        showOtherMonths: true,
        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        onShow: function(){setTimeout(Open, 200);},
        showTrigger: '#calImg'
  });

 function Open(){
  if($(".datepick-popup").length > 0){
     $(".datepick-popup .datepick-selected:first, .datepick-popup .datepick-selected:last").addClass("selected");
  }    
} 

so you have 2 solutions!!