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:
If loaded via JQuery load() and enhanced, the browser shows something like a date picker within the time picker input field.
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:
I use the "latest" core and flipbox of the plugin.
Hope anybody can help me out.
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.