如何使引导日期选择器同时出现在输入字段和图标上？答案

【问题标题】：How to make bootstrap datepicker appear onclick on input field and icon at the same time?如何使引导日期选择器同时出现在输入字段和图标上？
【发布时间】：2018-01-16 14:42:32
【问题描述】：

我正在使用引导程序的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>

【问题讨论】：

标签： twitter-bootstrap datepicker

【解决方案1】：

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

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

【讨论】：

感谢您的快速回复.. 我试过这个但是当我点击输入然后在日历按钮上显示两个日期选择器不堪重负
然后，做这样的事情：a=$('#start-date','#start-date-datepicker'); a.click(function () { $('#myField').datepicker("show"); });并尽量不要为日期选择器使用相同的 ID？
非常感谢..它有效，但有一个问题..我如何设置 datepicker 的参数以便我只显示年份viewMode: 'years', ...我的意思是当我有 @ 时如何添加这个987654324@ 属性 ?
根据 jquery 文档：documentation 你不能但是你可以做类似的事情：$("#start-date").focus(function () { $(".ui-datepicker-days").hide(); }); .ui-datepicker 在 CSS 中，你应该在这里隐藏所有东西 :) 无论如何你可以使用 showOn: $('#start-date')，如果你没问题，将问题标记为已解决

【解决方案2】：

我找到了解决办法：

这对我有用

<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>

【讨论】：

【解决方案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，所以我猜我很幸运，一切正常！

【讨论】：