jQuery Mobile -> Override jQuery UI Datepicker -> Layout broken

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.

Solution 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

Solution 2

This was my solution

$( ".ui-page" ).live( "pagecreate", function(){     
    $( "input[type='date'], input:jqmData(type='date')" ).each(function(){
        $(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) );
    }); 
    $('.hasDatepicker').hide();
    $( "input[type='date'], input:jqmData(type='date')" ).click(function(){
        $(this).next('.hasDatepicker').show();
        })
    $( '.ui-datepicker-calendar a' ).live('click', function() {
       $( '.hasDatepicker' ).hide('slow');
      });
});

Solution 3

You were correct, I apologize for not properly implementing it the first time.

This should fix your issue:

It will hide your calendar on load, show it when the input is in focus (clicked on or tabbed to) and hide it again as soon as a date is selected (but will not interfere with switching months).

$(function()
{
    $( '.hasDatepicker' ).hide();

    $( '#date' ).focus(function() {
        $( '.hasDatepicker' ).show('slow');
    });

    $( '.ui-body-c a' ).live('click', function() {  // .live() event important
                                                    //or else clicks stop functioning
                                                    //after first selection
        $( '.hasDatepicker' ).hide('slow');
    });
});

Here is the example live

Solution 4

I had the same issue with two datepickers in the same page. This was my solution:

HTML code:

<div data-role="fieldcontain">
   <div id="startPicker">
      <input type="date" name="startDate" id="startDate" value=""/>
   </div>
   <div id="endPicker">
     <input type="date" name="endDate" id="endDate" value=""/>
   </div>    

</div>

1. This was tested in Safari browser.
2. Inspect the date input element.
3. Look that, inside the <div data-role="fieldcontain" ...>. there is a new DIV that was created dinamically and has this id="dp1298574069963". I captured it in a variable (var idDivStart = $("#startPicker div").attr("id");) and use it variable to specify that all elements inside that Div that has the ui-datepicker class will be shown ($("#"+idDivStart+" .ui-datepicker").show();).

JS code:

$(function() {
        $(".ui-datepicker").hide();

        // startDate datepicker
        var idDivStart = $("#startPicker div").attr("id");

        $("#startDate").focus(function() {
            $("#"+idDivStart+" .ui-datepicker").show();
        });

        // endDate datepicker
        var idDivEnd = $("#endPicker div").attr("id");

        $("#endDate").focus(function() {
            $("#"+idDivEnd+" .ui-datepicker").show();
        });

        //
        $(".ui-datepicker-calendar a").live("click", function() {
            $(".ui-datepicker").hide();
        });

        //
        $(".inputsText").focus(function() {
            $(".ui-datepicker").hide();
        });
        //
        $("div").attr("tabindex",-1).focus(function() {
            $(".ui-datepicker").hide();
        });
});

I hope to help you.

View more solutions

Comments

[Tim]

The example does not hide the datepicker! It is applied on a div, but it must be applied on the form input field itself, so it won't be displayed when after laoding the page. This is the normal behavior of the jQuery UI datepicker and of this one.

[Tim]

Thank you for your help. The problem is the switch of the months, like you mentioned. Also having the datepicker as an overlay would be better and I have the jQuery UI Datepicker functionality when binding to the input field, so the problem with the months will be solved and I have the overlay functionality.

[Tim]

Your solution works. Unfortunately the dialog is a separate window, it would be nicer if it is like the jQuery UI overlay. But I have another problem: I have 2 date input fields on one site and so both will open and close if I click in one of them. Here is the example: jsbin.com/upeyo5/4