Question

我正在尝试使用优秀的Bootstrap DateTimePicker插件，但似乎在开始时就已经点击了缓冲区。页面控件正确显示但日历按钮完全没有响应 - 实际上没有选择器弹出。我创建了this fiddle来说明问题。检查小提琴的控制台输出并没有发现任何明显错误。

我注意到示例代码使用了jQuery 1.8.3，所以我尝试了回到那个但无济于事。我怀疑我在这里弄错了但我无法弄清楚那可能是什么。我非常感谢任何帮助。

我使用的测试标记非常简单 - 直接从Datetimepicker示例文档中复制

<div class="form-group">
  <label for="dtp_singleshot" class="col-md-2 control-label">Choose</label>
  <div class="input-group date form_datetime col-md-5" data-link-
   field="dtp_singleshot">
  <input class="form-control" size="16" type="text" value="" readonly>
  <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
  <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
  </div>
<input type="hidden" id="dtp_singleshot" value="" /><br/>
</div>

Answer 1

首先，您必须从readonly中删除input属性。你不需要第二个隐藏的输入。然后，您必须将id dtp_singleshot分配给input-group或input。

<div class="form-group">
  <label for="dtp_singleshot" class="col-md-2 control-label" id="dtp_singleshot">Choose</label>
  <div class="input-group date form_datetime col-md-5" data-link-
   field="dtp_singleshot">
  <input class="form-control" size="16" type="text" value="">
  <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
  <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
  </div>
</div>

Bootstrap Datetimepicker无法正常运行

1 个答案:

JSFIDDLE