JQuery Mobile Datebox - 如何删除输入框并仅显示内联日历？答案

【问题标题】：JQuery Mobile Datebox - How to remove the input box and show only the inline calendar?JQuery Mobile Datebox - 如何删除输入框并仅显示内联日历？
【发布时间】：2011-08-06 15:13:11
【问题描述】：

大家好，

我想使用 datepicker 向用户显示事件所在的特定日期。我的游戏计划是使用 datepicker 作为内联，显示它始终显示并将突出显示的日期传递给它。我的问题是，如何隐藏输入框，让用户只看到日历？或者，用户可以单击一个按钮来显示日历，但我不希望他们能够选择一个日期。

谢谢迈克

【问题讨论】：

标签： jquery mobile hide inputbox datebox

【解决方案1】：

这有帮助：

.ui-input-datebox { width: 40px; border: 0; background: transparent; padding: 0;margin: 0; box-shadow: none;}
.ui-input-datebox input {display: none;}

【讨论】：

【解决方案2】：

带有数据选项"hideInput": "true"（参见http://dev.jtsage.com/jQM-DateBox/demos/fullopt.html，然后是“显示选项”-Accordion-Tab）

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

【讨论】：

【解决方案3】：

显然我没有准备好记录这个 - useInlineHideInput: true 应该这样做。我认为这也取决于 useInline 是否为真。

【讨论】：

【解决方案4】：

可以这样做：

HTML

<a href="#" id="date-trigger" data-role="button" data-icon="grid" data-iconpos="noText" >28/08/2013</a>

<input data-role="datebox" data-options='{"mode": "calbox", "hideInput": "true", "noButton": "true"}' name="date" id="date" type="date" value="28/08/2013">

JS

$('#date-trigger').on( 'click', function(){
    $('#date').datebox('open');
});

使用 Datebox2，请参阅http://dev.jtsage.com/jQM-DateBox2/demos/opt/open.html。

大卫

【讨论】：

【解决方案5】：

这是一个很好的答案。

<input id="date-id" name="date" type="text" data-role="datebox" data-options='{"mode":"calbox", "hideInput": "true", "hideButton": "true", "useInline": "true"}'>

【讨论】：

欢迎来到 Stack Overflow。用代码回答时，请花时间写一两段，解释你的解决方案。

【解决方案6】：

您可以使用以下代码隐藏输入框：

<div style="display: none;">
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "calTodayButton": true}'>
</div>

【讨论】：