让 bootstrap-datetimepicker 出现在字段和图标上，而不重复

Question

我正在努力让 bootstrap-datetimepicker 以我希望的方式工作。通常，日期时间选择器仅在单击图标时弹出。但我希望它在单击字段和图标时弹出。

    <div class="input-group datetime datepicker">
      <input class="form-control" type="text" name="leaving_time" id="leaving_time">
      <span class="input-group-addon">
       <i class="glyphicon glyphicon-time"></i>
    </span>
    </div>

我发现如果我在输入字段上添加相同的 class（日期选择器），则在单击该字段时会出现弹出窗口，这正是我想要的。

但问题是，如果我先单击该字段，然后单击图标，则单击该字段时弹出的日期选择器不会消失。这意味着屏幕上最终会出现两个日期选择器。

但是，如果我先单击 glphyicon，然后单击该字段，它就可以正常工作。就像在单击该字段时，按时间的日期选择器消失并出现 on 字段。如果先单击该字段然后单击图标，我该如何做到这一点，以便发生同样的事情。

    <div class="input-group datetime datepicker">
      <input class="form-control datepicked" type="text" name="leaving_time" id="leaving_time">
      <span class="input-group-addon">
       <i class="glyphicon glyphicon-time"></i>
    </span>
    </div>

这里是 javascript 调用 datetimepicker 的代码：

$(document).on('ready page:change', function() {

$('.datepicker').datetimepicker({
   format: 'MMM Do YYYY',
   pickTime: false,
   collapse: true     
});
});

Answer 1

您可以在单击输入组插件范围时简单地聚焦输入。

$('.datepicker').each(function(k, v) {
  var $input = $(v).find('.make-datepicker');
  $input.datetimepicker({
    format: 'MMM Do YYYY',
    collapse: true
  });
  $(v).find('span.input-group-addon').click(function(e) {
    $input.focus(); 
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/src/js/bootstrap-datetimepicker.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<br/>
<div class="input-group datetime datepicker">
  <input class="form-control make-datepicker" type="text" name="leaving_time" id="leaving_time">
  <span class="input-group-addon">
       <i class="glyphicon glyphicon-time"></i>
    </span>
</div>

Answer 2

迟到的答案，但我找到了一个更好的解决方案来满足任何人的需要。

<div class="col-md-6 input-group">
    <input type="text" id="testdate" name="testdate" class="form-control" value="">
    <label class="input-group-addon btn" for="testdate">
       <span class="fa fa-calendar"></span>
    </label>                    
</div>

让 bootstrap-datetimepicker 出现在字段和图标上，而不重复

Get bootstrap-datetimepicker to appear on field and on icon, without duplicating

javascript

jquery

ruby-on-rails

datetimepicker

twitter-bootstrap-3