引导日期时间选择器，单击图像时显示对话框答案

【问题标题】：bootstrap datetime picker, show dialogue when clicking on image引导日期时间选择器，单击图像时显示对话框
【发布时间】：2014-03-18 07:19:04
【问题描述】：

我正在使用引导日期时间选择器进行输入。

我定义了以下 html div

<div class="form-group">
    <label for="movingDate">Moving Date</label>
    <div class="input-group date ui-datepicker">
        <input type="text" id="prefMovingDate" name="movingDateTime" class="form-control" data-required="true">
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>
</div>

这个 javascript 启用引导日期时间选择器

    $('#prefMovingDate').datetimepicker({
        format : 'd-M-yyyy H:ii P',
        autoclose : true,
    });

输出如下

现在当我点击文本框时，我看到了这个

这很好，但我想要的是即使单击小日历图标也应该弹出日期选择。我尝试了各种方法，但我无法理解它。对此的任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery html twitter-bootstrap bootstrap-datetimepicker

【解决方案1】：

尝试在您的日历图标上单击事件并触发输入焦点#prefMovingDate：

$('.input-group').find('.fa-calendar').on('click', function(){
    $(this).parent().siblings('#prefMovingDate').trigger('focus');
});

或者如果这个 id #prefMovingDate 对页面来说是唯一的，那么你可以简单地这样做：

$('.input-group').find('.fa-calendar').on('click', function(){
    $('#prefMovingDate').trigger('focus');
});

【讨论】：

【解决方案2】：

我遇到了类似的问题。我的问题是日历图标单击显示日历下拉菜单，但不显示输入框。但是，新版本的 Bootstrap DateTime Picker 提供了allowInputToggle 以使输入也能正常工作。

HTML：

<div class="form-group">
    <div class='input-group date datetimepicker'>
        <label class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </label>
        <input type='search' name="s" class="form-control" placeholder="Search News By Calendar..." />
        <span class="input-group-addon">
            <button type="submit" class="btn btn-primary"></button>
        </span>
    </div>
</div>

JavaScript：

$( '.datetimepicker' ).datetimepicker({
    'format' : 'YYYY-MM-DD',
    'allowInputToggle' : true
});

看到这个https://github.com/Eonasdan/bootstrap-datetimepicker/issues/704

【讨论】：

'allowInputToggle' : true 它对我有用 :-) 谢谢 Vannkorn