Question

我正在尝试将JQM DateBox插件（http://dev.jtsage.com/jQM-DateBox2/）实现到我的网站中。我在单独的HTML文件“page2.html”中声明了日期选择器的HTML代码，并将其加载到“index.html”中的div中。将page2.html的代码直接放入div中可以正确显示时间选择器字段： enter image description here

如果通过JQuery load（）加载并加强，浏览器会在时间选择器输入字段中显示类似日期选择器的内容。

Strange appearance of time picker

单击右侧的按钮可打开时间选择器。我使用桌面版Chrome，在Firefox中没有出现此问题。

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>

如果没有增强功能，浏览器只会显示日期选择器：

enter image description here

我使用插件的“最新”核心和翻转盒。

希望有人可以帮助我。

Answer 1

这是因为DateBox实际上将输入字段类型设置为文本以避免浏览器增强 - 但是，使用.load方法，它太“迟到”（并且失败）。

解决方法是将类型设置为“text”而不是“date” - 这应该摆脱额外的控制。

使用JQuery.load加载JQM DateBox插件

1 个答案: