Question

所以我正在使用Jquery Mobile的日期选择器输入，并且在使其正确呈现时遇到一些困难。我已经包含了JQM团队提供的所有必要文件（http://dev.jtsage.com/jQM-DateBox/#/jQM-DateBox/demos/install.html），并且可以在我将其直接添加到静态HTML时进行渲染：

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

但是，我正在动态构建一个表单，并且即时添加这一部分HTML。我的所有其他输入都是获得Jquery Mobile样式，除了这样做之外：

$(form).html(formFields);               
var page = document.getElementById('page');
$(page).trigger('create');

formFields是我追加到页面的HTML字符串。

看起来在上面的静态HTML页面中，当页面加载时，JQM会向该代码添加一堆东西。当我调用create方法时，它似乎没有做同样的事情。有没有人知道是否有这个问题？提前谢谢。

更新：因此，通过下面发布的有用评论，似乎由于这不是正式的JQM输入，因此调用“create”方法将不会刷新此输入并应用必要的样式。上面发布的HTML正是我使用我的字符串生成器创建的。问题在于令人耳目一新。页面加载时，会在日期输入HTML中添加一些额外的内容。下面是它在firebug中的样子......任何一个体验过这个？

<div class="ui-input-datebox ui-shadow-inset ui-corner-all ui-body-c">
  <input id="mydate" class="ui-input-text ui-body-null ui-body-x" type="text" data-   options="{'mode': 'calbox'}" data-role="datebox" name="mydate">
  <a class="ui-input-clear ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow" title="date picker" href="#" data-theme="c" style="vertical-align: middle; float: right;">
     <span class="ui-btn-inner ui-btn-corner-all">
       <span class="ui-btn-text">date picker</span>
       <span class="ui-icon ui-icon-grid ui-icon-shadow"></span>
     </span>
  </a>

Answer 1

好的伙计们，想通了。

事实证明，即使在调用“create”方法之后，也没有应用样式。所以我转向一个漂浮在网络上的黑客。我基本上只是摧毁了整个表格并重建了它：

$('#page').page("destroy").page();

Page是表单所在的内容窗格的名称。重新加载简单。希望能帮助你们中的一些人......

Answer 2

要在动态插入HTML时正确呈现JT Stage DateBox，请执行以下代码

$('#mydate').textinput();
$('#mydate').datebox();
$('#mydate').datebox('hardreset');

第一行将其作为JQM文本输入，接下来的两行作为其余部分

Answer 3

另一个值得考虑的日期选择器是Mobi Pick，请参阅http://mobipick.sustainablepace.net/

Jquery Mobile - 日期选择器问题

3 个答案: