Question

I am using jQuery Mobile in my web application. There is a datepicker which overrides the default jQuery UI datepicker.

Here is the source:
https://github.com/jquery/jquery-mobile/tree/master/experiments/ui-datepicker

The JavaScript file which overrides it, is here:
https://github.com/jquery/jquery-mobile/blob/master/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js

I have this line of code:

$(".ui-page").live("pagecreate", function(){
    $("input[type='date'], input[data-type='date']").each(function(){
        $(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true }));
    });
});

In this case, I get a datepicker which is always visible. To have the visibility only if a user clicks into a date text field, the datepicker must be connected to the input field, which is here not the case.
So I have to delete the .after("<div />"). But then, the design of the datepicker is totally broken, it seems that the rewrite of the datepicker does not take effect, because the CSS styles are not applied.

So, what’s wrong here?

Thank you in advance & Best Regards.

Answer 1

To fix the calendar problem you just need to change a selector in Squish’s code

 $( '.ui-datepicker-calendar a' ).live('click', function() {
   $( '.hasDatepicker' ).hide('slow');
  });

Example Here

Creating this in a dialog is simple too, just put it in another html and call it like so

<a href="foo.html" data-rel="dialog">Open dialog</a> 

Dialog Documentation