jquery - 单击按钮时如何在jquery-mobile中显示日期框日历

Question

我不想有日期文本字段，我只想在用户单击按钮时弹出日期框（日历）..

我发现的这段代码..

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

但我不想要一个文本字段。唯一显示日历的按钮

Answer 1

这对你有用吗？

• http://jsfiddle.net/UtFMs/

JS

$('#linkmodelink').live('click', function() {
    $('#linkmode').datebox('open');
});

HTML

<div data-role="fieldcontain">
    <label for="linkmode">Some Date</label>
    <input name="linkmode" type="date" data-role="datebox" id="linkmode" data-options='{"noButton": true}' />
</div>
<br />
<a href="#" id="linkmodelink" data-role="button">Click Here</a>

我刚刚在这里使用了“打开链接”示例：

• http://dev.jtsage.com/jQM-DateBox/demos/odd/open.html

并将 data-role="button" 添加到锚标记中，使 jQM 添加按钮标记

Answer 2

第一：谢谢菲尔！！我们在哪里期待这个解决方案！

但是，对于那些尝试使用 JQM v:1.1.0 和 jQ v:1.7.1 和 Datebox v:2.1 的人，您必须对代码进行一些细微的更改（感谢 @ GeralOE）：

HTML：

    <input data-theme="c" name="dtFrom" id="dtFrom" type="date" data-role="datebox"  data-options='{"mode": "calbox", "afterToday": true, "hideInput": true }' style="width: 30px" />
    <input name="dtTo" id="dtTo" type="date" data-role="datebox" data-options='{"mode": "calbox", "afterToday": true, "hideInput": true }' />                     

<div data-role="controlgroup" data-type="horizontal" id="btnCalendar">
    <a href="#" id="From" data-role="button">From</a>
    <a href="#" id="To" data-role="button">To</a>
</div>
​

JS：

$('#btnCalendar').on("click", "a", function() {
    $thisCalendar = $(this).attr("id");
    $('#dt' + $thisCalendar).datebox('open');
});

​</p>

您可以在以下位置对其进行测试：http: //jsfiddle.net/geralOE/nAugy/2/（我们将对其进行更新以实现一些其他功能，例如在 from 和 to 按钮上写入日期）。

此外，考虑到“ live”在 1.7 中已被弃用，因此您必须使用“ delegate”（这反过来将被弃用，因此请使用“ on”进行准备。