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

【问题标题】：how to show Datebox calendar in jquery-mobile when clicking a button单击按钮时如何在jquery-mobile中显示日期框日历
【发布时间】：2011-11-16 09:30:26
【问题描述】：

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

我找到的这段代码..

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

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

【问题讨论】：

看看这里怎么做：stackoverflow.com/questions/8115541/…

标签： jquery iphone jquery-mobile datebox

【解决方案1】：

这对你有用吗？

http://jsfiddle.net/UtFMs/

$('#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 添加按钮标记

【讨论】：

如果你想完全隐藏输入，我将两个选项放在一起让你：jsfiddle.net/UtFMs/1（如果你下载了，请确保更新你的源，这在 10 分钟内不起作用以前。）Fwiw，如果您希望检索它以获取其他内容，（现在隐藏）输入中的值仍会更新
Adham J.T.Sage 是 DateBox =P 的开发者
我运气真好，谢谢@J.T.Sage，我还有一个关于日期框的小问题stackoverflow.com/questions/8163139/…

【解决方案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/（我们将对其进行更新以实现一些其他功能，例如在 from 和 to 按钮上写入日期）。

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

【讨论】：