首页 文章

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

提问于
浏览 次
7

我正在使用bootstrap日期时间选择器进行输入 .

我定义了以下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启用bootstrap日期时间选择器

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

输出如下

enter image description here

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

enter image description here

这很好，但我想要的是，即使点击了小日历图标，也会出现日期选择弹出窗口 . 我尝试了各种方法，但我无法理解它 . 任何有关这方面的帮助将不胜感激 .

javascript jquery html twitter-bootstrap bootstrap-datetimepicker

2 回答

  • 8

    在日历图标上尝试点击事件，并触发对输入 #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');
});
    回复于
  • 4

    我有类似的问题 . 我的问题是日历图标单击显示日历下拉列表但不显示输入框 . 但是，新版本的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

    回复于

相关问题