Jquery UI Multiple Datepicker selection

Question

Hi I have several date pickers all under the same class of .datepicker I have a function which executes onSelect of any of the date pickers. However I want to execute another function on selection of a specific date picker I've tried to do a separate date picker assignment to the specific one I want a separate function on but can't seem to get it to work

Original Datepicker Class

 $(".datepicker").datepicker({

            dateFormat: 'yy-mm-dd',
            showButtonPanel: true,
            onSelect: function (date_check) { }

})

My specific targeted date picker which also holds class of datepicker.

$("#myDate").datepicker({

                dateFormat: 'yy-mm-dd',
                showButtonPanel: true,
                onSelect: function (date_assign) { }

    })

My question is:

Is there a way I can target specific datepickers with the .datepicker class to perform a secondary onSelect function to that specific datepicker. Or is there a different way?

*NB The datepicker has to be able to perform both the original function under the .datepicker class and the new function.

UPDATE

<input class="datepicker" id="a"> </input>
<input class="datepicker" id="b"> </input>
<input class="datepicker" id="myDate"> </input>

On selection of a or b or myDate run the the original .datepicker onSelect function

On selection of specifically myDate run the original .datepicker onSelect and run a separate onSelect function.

Answer 1

Create a custom event then trigger that, passing the parameters from the select to the custom event:

$('#myDate').on('customevent', function(e, dateText, inst) {
  alert('custom triggered' + dateText);
});
$(".datepicker").datepicker({
  dateFormat: 'yy-mm-dd',
  showButtonPanel: true,
  onSelect: function(dateText, inst) {
    if ($(this).is('#myDate')) {
      $('#myDate').trigger("customevent", [dateText, inst]);
    }
    // do universal code
    alert('Date:' + dateText);
  }
});

Play around with it here: https://jsfiddle.net/MarkSchultheiss/3grqL8c9/

Answer 2

you can check if the option onSelect is already been assigned and if so add it to the function like so

var onSelectFn = $("#myDate").datepicker( "option", "onSelect")
$("#myDate").datepicker({
                dateFormat: 'yy-mm-dd',
                showButtonPanel: true,
                onSelect: function (date_assign) { 
                     if(typeof onSelectFn === 'function') onSelectFn();
                     // do the next function
                }

    })

UPDATE

in order to updated the onSelect property of the #myDate selector you need to work like this

first datePicker all of the .datepicker element like so

$(".datepicker").datepicker({
                dateFormat: 'yy-mm-dd',
                showButtonPanel: true,
                onSelect: function (date_assign) { 
                     if(typeof onSelectFn === 'function') onSelectFn();
                     // do the next function
                }

    })

then update the onSelect of the #myDate

$("#myDate").datepicker( "option", "onSelect",function(data_assign){
  // your new functionality 
})

that should do the trick :)

Answer 3

I managed to answer my own question:

$(".datepicker").datepicker({
            dateFormat: 'yy-mm-dd',
            showButtonPanel: true,
            onSelect: function (date_check) {

            //DO SOME FUNCTION STUFF

           if($(this).attr('id') == "myDate") {

            //DO SOME EXTRA STUFF

           }
      }
});

How it works

Every datepicker uses the .datepicker class and performs the first function, but when you click the #myDate datepicker it gets the id attribute for $(this) which according to the jquery UI Datepicker API:

onSelect Function

Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.

So this gets you the current clicked datepicker. Then you can perform a comparison on the ID to the element you want it to match and then do your second bit of function.