![日期时间选择器]( "日期时间选择器")
本文介绍了Bootstrap 日期时间选择器不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用出色的 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>
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>
这篇关于Bootstrap 日期时间选择器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！