CODEWITHSUNDEEP
javascriptjqueryjquery-ui-datepicker
davexpression
davexpression

Reputation: 117

Change/Edit onSelect event of an active jQuery Datepicker

If another code displays datepicker like this:

$('#my-datepicker').datepicker({
    onSelect: function(dateText, inst) { 
    // console.log()
}
});

and I was wondering to add another event when the datepicker is selected, how will I do this?

UPDATE: I can get the instance of the datepicker like this:

var id = document.getElementById('my-datepicker'); 
var inst = window.$.datepicker._getInst(id);

Upvotes: 2

Views: 1521

Answers (1)

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

You can ovveride simply the call by using the option on the onSelect function property :

$( "#my-datepicker" ).datepicker("option", "onSelect", function() {
    // do some stuff 
    console.log(" another event");
});

See below snippet : 

jQuery(function($) {

  $("#my-datepicker").datepicker({
    onSelect: function(dateText) {
      console.log(" default event");
    }
  });
  
  $( "#my-datepicker" ).datepicker("option", "onSelect", function() {
    console.log(" another event");
});

});
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<input type='text' id='my-datepicker'>

Upvotes: 2

Related Questions