0

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

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

时间选择器的奇怪外观

单击右侧的按钮会打开时间选择器。我使用的是桌面版的 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>

索引.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>

没有增强，浏览器只显示日期选择器：

在此处输入图像描述

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

希望有人可以帮助我。

4

1 回答 1

0

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

解决方法是将类型设置为“文本”而不​​是“日期” - 这应该摆脱额外的控件。

于 2013-09-16T16:24:25.660 回答