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.

Mark Schultheiss · Accepted Answer · 2016-04-05 13:13:12Z

2

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/

answered Apr 5, 2016 at 13:13

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zamboney · Accepted Answer · 2016-04-05 12:31:19Z

0

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 :)

edited Apr 5, 2016 at 12:31

answered Apr 5, 2016 at 12:06

Zamboney

2,00712 silver badges22 bronze badges

4 Comments

Mr Dansk Over a year ago

Sorry, will this only run the second function if the "#myDate" element is "selected" ?

Zamboney Over a year ago

no its will run them both, you want to disable the first and run the other?

Mr Dansk Over a year ago

Okay, but I only want to run the second function when the "#myDate" datepicker is selected. I'll try to provide and example in my question. Check out my update, see if that explains what I am trying to achieve.

Mr Dansk Over a year ago

It doesn't seem to do what I want it to do. Selecting any date picker works in executing its function. However selecting the #myDate date picker does not execute the second function.

Mr Dansk · Accepted Answer · 2016-04-06 06:12:34Z

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.

Collectives™ on Stack Overflow

Jquery UI Multiple Datepicker selection

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related