Bootstrap 日期时间选择器不起作用 [英] Bootstrap Datetimepicker not functioning

问题描述

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

我注意到示例代码使用了 jQuery 1.8.3，所以我尝试退回到那个但无济于事.我怀疑我在这里出了什么问题，但我无法弄清楚那可能是什么.如有任何帮助，我将不胜感激.

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

<label for="dtp_singleshot" class="col-md-2 control-label">选择</label><div class="input-group date form_datetime col-md-5" data-link-字段=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>
<input type="hidden" id="dtp_singleshot" value=""/><br/>

解决方案

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

<label for="dtp_singleshot" class="col-md-2 control-label" id="dtp_singleshot">选择</label><div class="input-group date form_datetime col-md-5" data-link-字段=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>

JSFIDDLE

I am experimenting with the excellent Bootstrap DateTimePicker plugin but appear to have hit the buffers right at the start. The page control appears correctly but the calendar button is entirely unresponsive - no picker actually pops up. I have created this fiddle to illustrate the problem. Examining the console output for the fiddle does not reveal anything obviously wrong.

I noticed that the sample code uses jQuery 1.8.3 so I tried dropping back to that but to no avail. I suspect that I am getting something wrong here but I cannot quite figure out what that might be. I'd be most grateful for any help.

The test markup I am using is quite straightforward - and copied directly from the Datetimepicker example docs

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

解决方案

First of all, you have to remove readonly attribute from your input. You don't need second hidden input. Then you have to assign id of dtp_singleshot to your input-group or 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>

JSFIDDLE

这篇关于Bootstrap 日期时间选择器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！