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

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');
});

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

另外，请考虑到“live”从 1.7 开始已被弃用，因此您必须使用“delegate”（它反过来也会被弃用，因此请准备“<代码>上”。