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>

我发现如果我在输入字段上添加了相同的类（datepicker），则单击该字段时会出现弹出窗口，这就是我想要的。

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

但是，如果我先点击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>

以下是调用datetimepicker的JavaScript代码：

$(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以显示在字段和图标上，而不重复

2 个答案: