Question

我正在使用datepicker引导程序，每当我点击图标或输入字段时，我都会尝试弹出窗口

我正在使用bootstrap3：datepicker docs

这是我的script：

 $(function () {
        $('#start-date').datetimepicker({
            viewMode: 'years',
            format: 'MM-YYYY'
        });

和html：

 <div class="col-lg-4">
                        <label for="start-date">Start Date</label>
                        <div class="input-group date">
                            <input class="form-control" type="text" value="{{ start_date }}"
                                   id="start-date">
                            <span class="input-group-addon"><i class='fa fa-calendar'></i></span>
                        </div>
                    </div>

Answer 1

我找到了解决方案：

这对我有用

<div class="col-lg-4">
   <label for="start-date">Start Date</label>
   <div class="input-group date">
      <input class="form-control" type="text" value="{{ start_date }}"
                               id="start-date">
            <label class="input-group-addon" for="start-date"><i class='fa fa-calendar'></i></label>
    </div>
</div>

Answer 2

如果我理解的话，你可以触发点击，然后像这样显示日期选择器：

$('#start-date').click(function () {
    $('#myField').datepicker("show");
});

Answer 3

简单-使用课程！（这可能不能对您有用！请参阅下面的*。）

HTML =

<div class="input-group date fooClass" id="startTime">
  <!-- style="position: relative"-->
  <input class="form-control fooClass" id="startTime1" type="text" name="startTime">
  <span class="input-group-addon">
    <i class="glyphicon glyphicon-time"></i>
  </span>
</div>

JS =

<script>
  $('.fooClass').datetimepicker({
      format: 'LT',
      keepOpen: true
  });
</script>

为我工作，但下载有点奇怪。我在http://eonasdan.github.io/bootstrap-datetimepicker/找不到“当前”下载，因此我下载了他们正在使用的CDN源。

*我正在使用最新的Bootstrap 3 （不是4）和jQuery v3.4.1。 bootstrap-datetimepicker有各种各样的版本，不同的版本需要不同的jQuery。因此，这可能对您不起作用。

PS刚看过，他们正在使用JQ v2.1.1，所以我很幸运，一切正常！

如何在输入字段和图标上同时显示bootstrap datepicker？

3 个答案: