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.

Answer 1

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');
      });
});

Answer 2

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

Answer 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

Answer 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.

Answer 5

The author of mobile datepicker has a functioning example on his git page.

It hides the datepicker and displays an input box as intended. What exactly is the difference between your implementation and the standard? Can you give a working snippet of what you're doing? You can mark it up on JSBin if you feel that'll be easier.

Answer 6

I had a similar problem working with two dates and this worked:

Markup (C# MVC3):

    <div data-role="fieldcontain" id="fooDate1Div">
        <%: Html.LabelFor(model => model.fooDate1) %>
        <%: Html.TextBox("fooDate1", Model == null ? Customer.GetLocalTime().ToString("d") : Model.fooDate1.ToString("d"), new Dictionary<string, object>{{"type", "date"}, {"id", "fooDate1"}})%>
        <%: Html.ValidationMessageFor(model => model.fooDate1)%>
    </div>

    <div data-role="fieldcontain" id="fooDate2Div">
        <%: Html.LabelFor(model => model.fooDate2) %>
        <%: Html.TextBox("fooDate2", Model != null ? Model.fooDate2 : null, new Dictionary<string, object>{{"type", "date"}, {"id", "fooDate2"}})%>
        <%: Html.ValidationMessageFor(model => model.fooDate2) %>
    </div>

Script:

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

        // fooDate1 datepicker
        var idDivStart = $("#fooDate1Div div").attr("id");
        $("#fooDate1").focus(function () {
            $("#" + idDivStart + " .ui-datepicker").show('fast');
        });

        // followUp datepicker
        var idDivEnd = $("#fooDate2Div div").attr("id");
        $("#fooDate2").focus(function () {
            $("#" + idDivEnd + " .ui-datepicker").show();
        });

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