jQuery UI Datepicker Event catcher NOT within the plugin code

Question

I am trying to trigger an event outside of the jQuery UI's onSelect code.

I am trying to use jQuery (and I tried vanilla JS too), to catch the on select event of a date, which is actually a 'table td' element.

I tried bubbling up the event, are there any suggestions on how to capture the on select event outside of the jQuery UI date picker plugin code? I thought this should be fairly easy, but for the life of me, I can not capture it.

Here is my code:

 $(function() {
  $( "#datepicker" ).datepicker();

 //I will not be using the onSelect inside the datepicker() function. 
  //I need access without adding it into the datepicker() function hence the code below
   
 
  });

//This works
$('body').on("click", function(){
  //console.log("body click"); 
});

//This does not and Why?
  $('body').on("click", ".ui-datepicker-calendar td", function(){
console.log("date picked");
   });

//NEITHER DOES THIS
  $(".ui-datepicker-calendar td").on("click", function(){
console.log("date picked");
   });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>



<input id="datepicker" />

Here is my CodePen https://codepen.io/createitcarlos/pen/OJvWLpY

Twisty · Answer 1 · 2022-07-19T18:57:07.673

Would advise using onSelect option: https://api.jqueryui.com/datepicker/#option-onSelect

$(function() {
  $("#datepicker").datepicker({
    onSelect: function(dateString, objInst) {
      console.log("Click Event Triggered", dateString);
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<input id="datepicker" />

Datepicker, unlike a lot of the other Widgets in jQuery UI, is a bit unique. It builds the Table on the fly. So Even if you try to bind a new event to the element, it may not work well.

You can try calling the Widget, $("#datepicker").datepicker("widget"), to access the HTML.

Returns a jQuery object containing the datepicker.

You may not get what you want.

Using onSelect will allow you to trigger something in that callback.

Update

Here is an example that can capture the Events and inspect them. I suspect it may not work for what you are trying to do.

$(function() {
  $("#datepicker").datepicker({
    onSelect: function(dateString, objInst) {
      console.log("Click Event Triggered", dateString);
    }
  });

  // Remote trigger opening of DatePicker
  $("#datepicker").focus().click();

  // Select the Clickable Items
  var days = $(".ui-datepicker [data-event='click']");
  // Iterate each item
  days.each(function(i, d) {
    // Inspect Events for the element
    var events = $._data(d, "events");
    // Copy the current Click event Handler
    var oClick = events.click[0].handler;
    // Disable current Clikc event and assign new Click event
    $(d).off("click").click(function(e) {
      console.log("Super Click");
      // Call the original event to ensure it continues to work properly
      oClick.apply(this);
    })
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<input id="datepicker" />

When the Datepicker is shown, you can then select the items. If you close it and try again, the custom event it wiped.

I guess I should clarify, I want it outside the actual $("#datepicker").datepicker({ }); So not in the onSelect, but outside the plugin function completely — ClosDesign, Jul 18 '22 at 21:47
@ClosDesign I am not sure what you mean by this. You're performing a `click` event inside the Object, and you want it to trigger some other activity, this is the way to do it. You have not provided enough context for me to understand what you are trying to accomplish. It sounds like you are Asking Y to solve for X. Just ask how to solve for X. — Twisty, Jul 18 '22 at 21:52
Yes I know. My reasoning is because the datepicker is in code I can not necessarily edit and push to a server quickly and directly. So we have an external JS file that extends some functions or the DOM for temporary use. This is why I am looking for a way to solve X with a Y solution. — ClosDesign, Jul 19 '22 at 00:05
@ClosDesign I have updated my answer. I don't think this will help you yet maybe it will give you some insight into why or what you can do. — Twisty, Jul 19 '22 at 18:28

jQuery UI Datepicker Event catcher NOT within the plugin code

1 Answers1