I am using jquery mobile datepicker, i need to capture the calendar click event,

Question

0

Asked: May 28, 20262026-05-28T02:25:13+00:00 2026-05-28T02:25:13+00:00

I am using jquery mobile datepicker, i need to capture the calendar click event,

0

I am using jquery mobile datepicker, i need to capture the calendar click event, i have 2 datepicker div’s that i want to capture separately

Currently I am using the following selector which working fine, but now i want to handle them separately 1st selector for first div and 2nd selector for div 2.

 $(function () {
 $("table.ui-datepicker-calendar a").live("click", function () {  alert("aa"); });
});

I have tried using, but this one does not capture the event.

 $(function () {
     $("div#startPicker table.ui-datepicker-calendar a").live("click", function () {  alert("aa"); });
    });

Below is the dom for div one

<div id="startPicker" tabindex="-1">   
<input id="PickUpDate" name="PickUpDate" value="" class="smaller ui-input-text ui-body-a ui-corner-all ui-shadow-inset" placeholder="" required="true" type="date">
<div tabindex="-1" class="hasDatepicker" id="dp1326273193191">
<div tabindex="-1" style="display: none;" class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-body-c ui-corner-top">
<a data-theme="c" href="#" class="ui-datepicker-prev ui-corner-all ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow" onclick="DP_jQuery_1326273193189.datepicker._adjustDate('#dp1326273193191', -1, 'M');" title="Prev">
<span aria-hidden="true" class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></span>
<span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span></span></a>
<a data-theme="c" href="#" class="ui-datepicker-next ui-corner-all ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow" onclick="DP_jQuery_1326273193189.datepicker._adjustDate('#dp1326273193191', +1, 'M');" title="Next">
<span aria-hidden="true" class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">
<span class="ui-icon ui-icon-circle-triangle-e">Next</span></span>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></span></a>
<div class="ui-datepicker-title"><span class="ui-datepicker-month">January</span>&nbsp;<span class="ui-datepicker-year">2012</span></div></div>
<table class="ui-datepicker-calendar"><thead><tr><th class="ui-datepicker-week-end ui-bar-c">
<span title="Sunday">Su</span></th><th class="ui-bar-c"><span title="Monday">Mo</span></th>
<th class="ui-bar-c"><span title="Tuesday">Tu</span></th><th class="ui-bar-c">
<span title="Wednesday">We</span></th>
<th class="ui-bar-c"><span title="Thursday">Th</span></th><th class="ui-bar-c">
<span title="Friday">Fr</span></th><th class="ui-datepicker-week-end ui-bar-c">
<span title="Saturday">Sa</span></th></tr></thead><tbody><tr><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">1</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">2</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">3</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">4</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">5</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">6</a></td>
<td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">7</a></td></tr>
<tr><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">8</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">9</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">10</a></td><td class="ui-datepicker-today ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-state-highlight ui-btn ui-btn-up-c ui-btn-up-e" href="#">11</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">12</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">13</a></td>
<td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">14</a></td></tr>
<tr><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">15</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">16</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">17</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">18</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">19</a></td>
<td class="ui-datepicker-current-day ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-state-active ui-btn ui-btn-up-c ui-btn-active" href="#">20</a></td>
<td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">21</a></td></tr><tr>
<td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">22</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">23</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">24</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">25</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">26</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">27</a></td><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">28</a></td></tr>
<tr><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">29</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">30</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">31</a></td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled  ui-body-c"><span class="ui-state-default">1</span></td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled  ui-body-c">
<span class="ui-state-default">2</span></td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled  ui-body-c"><span class="ui-state-default">3</span></td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled  ui-body-c">
<span class="ui-state-default">4</span></td></tr></tbody></table></div></div>           
</div>

and for div 2

<div id="endPicker" tabindex="-1">   
<input id="PickUpDate" name="PickUpDate" value="" class="smaller ui-input-text ui-body-a ui-corner-all ui-shadow-inset" placeholder="" required="true" type="date">
<div tabindex="-1" class="hasDatepicker" id="dp1326273193191">
<div tabindex="-1" style="display: none;" class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-body-c ui-corner-top">
<a data-theme="c" href="#" class="ui-datepicker-prev ui-corner-all ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow" onclick="DP_jQuery_1326273193189.datepicker._adjustDate('#dp1326273193191', -1, 'M');" title="Prev">
<span aria-hidden="true" class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></span>
<span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span></span></a>
<a data-theme="c" href="#" class="ui-datepicker-next ui-corner-all ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow" onclick="DP_jQuery_1326273193189.datepicker._adjustDate('#dp1326273193191', +1, 'M');" title="Next">
<span aria-hidden="true" class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">
<span class="ui-icon ui-icon-circle-triangle-e">Next</span></span>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></span></a>
<div class="ui-datepicker-title"><span class="ui-datepicker-month">January</span>&nbsp;<span class="ui-datepicker-year">2012</span></div></div>
<table class="ui-datepicker-calendar"><thead><tr><th class="ui-datepicker-week-end ui-bar-c">
<span title="Sunday">Su</span></th><th class="ui-bar-c"><span title="Monday">Mo</span></th>
<th class="ui-bar-c"><span title="Tuesday">Tu</span></th><th class="ui-bar-c">
<span title="Wednesday">We</span></th>
<th class="ui-bar-c"><span title="Thursday">Th</span></th><th class="ui-bar-c">
<span title="Friday">Fr</span></th><th class="ui-datepicker-week-end ui-bar-c">
<span title="Saturday">Sa</span></th></tr></thead><tbody><tr><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">1</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">2</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">3</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">4</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">5</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">6</a></td>
<td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">7</a></td></tr>
<tr><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">8</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">9</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">10</a></td><td class="ui-datepicker-today ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-state-highlight ui-btn ui-btn-up-c ui-btn-up-e" href="#">11</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">12</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">13</a></td>
<td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">14</a></td></tr>
<tr><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">15</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">16</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">17</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">18</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">19</a></td>
<td class="ui-datepicker-current-day ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-state-active ui-btn ui-btn-up-c ui-btn-active" href="#">20</a></td>
<td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">21</a></td></tr><tr>
<td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">22</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">23</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">24</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">25</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">26</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">27</a></td><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">28</a></td></tr>
<tr><td class="ui-datepicker-week-end  ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;"><a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">29</a></td><td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">30</a></td>
<td class="ui-body-c" onclick="DP_jQuery_1326273193189.datepicker._selectDay('#dp1326273193191',0,2012, this);return false;">
<a data-theme="c" class="ui-state-default ui-btn ui-btn-up-c" href="#">31</a></td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled  ui-body-c"><span class="ui-state-default">1</span></td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled  ui-body-c">
<span class="ui-state-default">2</span></td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled  ui-body-c"><span class="ui-state-default">3</span></td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled  ui-body-c">
<span class="ui-state-default">4</span></td></tr></tbody></table></div></div>           
</div>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-28T02:25:14+00:00

Rather than using a click event on the a , you can use the onSelect event of the datepicker component to detect selection of dates.

From http://jqueryui.com/demos/datepicker/#event-onSelect

Allows you to define your own event 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.

Code examples

Supply a callback function to handle the onSelect event as an init
option.

    $('.selector').datepicker({
   onSelect: function(dateText, inst) { ... }
});

Probably,you can use different ids for the date input,lets say pickupdate1 and pickupdate2.
Then selection of first date picker can be captured by

$('#pickupdate1').datepicker({
       onSelect: function(dateText, inst) { alert("first"); }
    });

and the second datepicker by

$('#pickupdate2').datepicker({
           onSelect: function(dateText, inst) { alert("second"); }
        });

As a sidenote I would recommend using the datebox ( http://dev.jtsage.com/jQM-DateBox/ ) component for use with jQuery Mobile since it is more suitable for the mobile web.

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I am using jquery mobile datepicker, i need to capture the calendar click event,

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply