具有只读属性的<input>无法打开小部件
具有只读属性的<input>无法打开小部件
提问于 2018-06-22 19:06:58
我正在尝试使用https://github.com/Eonasdan/bootstrap-datetimepicker并尝试将输入字段设置为只读，但即使日期选择器按钮被禁用，我也无法打开日期选择器小部件
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control readonly" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>有没有办法使该字段成为只读字段，同时仍然可以访问date pciker小部件？
回答 2
Stack Overflow用户
发布于 2018-06-22 19:27:22
要让datetimepicker正常工作，必须将id设置为输入，而不是父容器。
要使输入为readonly，必须在输入中添加一个属性。不是一个班级。
<input type='text' class="form-control" id='datetimepicker1' readonly/>编辑：我更新了下面的代码片段，这样你就可以看到4种不同的行为：
在父div中定义的只读选择器的id，在父div中定义的input
- picker's id，在input
- picker's id中定义的
- 属性，在输入
中定义的
- 属性
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>
<script src="https://raw.githubusercontent.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
id in the parent div : <input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date'>
id in the input :<input type='text' class="form-control" id='datetimepicker2' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
id in the parent div, readonly : <input type='text' class="form-control" readonly/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date'>
id in the input, readonly :<input type='text' class="form-control" id='datetimepicker4' readonly/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
$('#datetimepicker3').datetimepicker();
$('#datetimepicker4').datetimepicker();
});
</script>
</div>
</div>
Stack Overflow用户
发布于 2018-06-24 01:40:09
我找到了解决我所面临的问题的办法。
在datetimepicker的选项中设置ignoreReadonly:true成功了，默认值为 false)
使用HTML标记中的只读属性将输入字段设置为只读，并使用上面的选项启用日期选择器按钮。
谢谢。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50986584
复制相关文章
相似问题