twitter-bootstrap 如何禁用 Bootstrap 日期时间选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44057022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable Bootstrap datetimepicker
提问by
I am using the Bootstrap datatimepicker (https://eonasdan.github.io/bootstrap-datetimepicker/). I'd like to disable the datetimepicker on page load.
我正在使用 Bootstrap datatimepicker ( https://eonasdan.github.io/bootstrap-datetimepicker/)。我想在页面加载时禁用日期时间选择器。
$(document).ready(function () {
$('#datetimepicker1').datetimepicker({
defaultDate: new Date(),
format: 'DD/MM/YYYY hh:mm:ss A'
});
});
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
I have tried $('#datetimepicker1').prop('disabled', true)and $('#datetimepicker1').disable()from (http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#disable). Neither work. So what is the best way to do it?
我曾尝试$('#datetimepicker1').prop('disabled', true)和$('#datetimepicker1').disable()从（http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#disable）。都不工作。那么最好的方法是什么？
回答by komal
try the following code $('#datetimepicker1 > .form-control').prop('disabled', true);please check the link https://jsfiddle.net/komal10041992/DTcHh/32829/
尝试以下代码 $('#datetimepicker1 > .form-control').prop('disabled', true);请检查链接https://jsfiddle.net/komal10041992/DTcHh/32829/
回答by VincenzoC
You were close to solution, you have to use disable(), but you have to remember that, as docssays:
您已经接近解决方案了，您必须使用disable()，但您必须记住这一点，正如文档所说：
NoteAll functions are accessed via the data attribute e.g.
$('#datetimepicker').data("DateTimePicker").FUNCTION()
注意所有功能都通过数据属性访问，例如
$('#datetimepicker').data("DateTimePicker").FUNCTION()
So you have to add .data("DateTimePicker")to your $('#datetimepicker1').disable().
所以你必须添加.data("DateTimePicker")到你的$('#datetimepicker1').disable().
Here a working sample:
这是一个工作示例：
$('#datetimepicker1').datetimepicker({
defaultDate: new Date(),
format: 'DD/MM/YYYY hh:mm:ss A'
});
$('#datetimepicker1').data("DateTimePicker").disable();<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>回答by Martin Cisneros Capistrán
$(document).ready(function () {
$('#datetimepicker1').datetimepicker({
defaultDate: new Date(),
format: 'DD/MM/YYYY hh:mm:ss A'
}).find("input:first").prop("disabled", true);
});