Load JQM DateBox Plugin with JQuery.load

StackOverflow https://stackoverflow.com/questions/18758132

  •  28-06-2022
  •  | 
  •  

Question

I am trying to implement the JQM DateBox Plugin (http://dev.jtsage.com/jQM-DateBox2/) into my Website. I declare the HTML code of the date picker in a separate HTML file "page2.html" and load it into a div in the "index.html". Putting the code of page2.html directly into the div shows the time picker field properly: enter image description here

If loaded via JQuery load() and enhanced, the browser shows something like a date picker within the time picker input field.

Strange appearance of time picker

Clicking on the button on the right side opens the time picker though. I use the desktop version of Chrome, in Firefox this problem doesn't appear.

page2.html:

<div data-role="fieldcontain">
    <label for="deftimeflip">Some Date</label><input name="deftimeflip" type="date" data-role="datebox" id="deftimeflip" data-options='{"mode": "timeflipbox"}' />
</div>

index.html:

<script>
$(document).ready(function() {
    $('#content').load("page2.html", function(event) {
        $('#content').trigger("create");    // enhance JQM elements

    });
});
</script>

<body>
    <div data-role="page" id="mainPage" data-theme="none">
        <div id="content" style="width:30%;">
            <div data-role="fieldcontain">
                <label for="deftimeflip">Some Date</label><input name="deftimeflip" type="date" data-role="datebox" id="deftimeflip" data-options='{"mode": "timeflipbox"}' />
            </div>
        </div>
    </div>
</body>

Without enhancing, the browser shows only the date picker:

enter image description here

I use the "latest" core and flipbox of the plugin.

Hope anybody can help me out.

Was it helpful?

Solution

It's because DateBox actually sets the input field type to text to avoid the browser enhancments - however, using the .load method, it is doing it too "late" (and failing at that).

The workaround is to set the type to "text" instead of "date" - that should get rid of the extra controls.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top