Question

In my html I have two different datepickers, inside two different divs. I want to do something when selecting a day from the datepicker, like this:

$('#details1 tr .ui-body-c').on('click', function(){
    $('#details1 .hasDatepicker').hide();
    if($('#date1').val()!="")
    {
        var day=new Date($('#date1').val());
        day.setHours(23);
        day.setMinutes(59);
        day.setSeconds(59);

        getDayData(day);
    }
});

But clicking on the day is not triggering the click event. If I remove the #details1 from the selector the event triggers, but with both of the datepickers.

Here’s a link to the datepicker plugin: http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/

EDIT: It seems that the table jquery-mobile datepicker creates is not detected inside the page. I even tried this:

$('html tr .ui-body-c').on('click', function(){
   $('#details1 .hasDatepicker').hide();
    if($('#date1').val()!="")
    {
        var day=new Date($('#date1').val());
        day.setHours(23);
        day.setMinutes(59);
        day.setSeconds(59);

        getDayData(day);
    }
});

And is not working. Also did var a = $('.datepicker-calendar').parent() and got [] as a result.

Any thoughts on why is this happening and how to solve it?

Answer 1

I worked around this by editing the jquery.ui.datepicker.mobile.js file, adding a custom class to elements.

if(options.altField!=undefined)
    $(dp).attr('id', options.altField.split('#')[1] + '1');

And then in function updateDatepicker(){

$( ".ui-datepicker-calendar td", dp ).addClass("ui-body-c "+$(dp).attr('id')+'2');

So if my date input’s id is “myDatePicker”, each td on the calendar will have class “myDatePicker12”, and I can do this:

$('.myDatePicker12').on('click', function(){
   $('#details1 .hasDatepicker').hide();
    if($('#date1').val()!="")
    {
        var day=new Date($('#date1').val());
        day.setHours(23);
        day.setMinutes(59);
        day.setSeconds(59);

        getDayData(day);
    }
});