Load JQM DateBox Plugin with JQuery.load

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

  •  28-06-2022
  •  | 
  •  

Domanda

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.

È stato utile?

Soluzione

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.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top