twitter-bootstrap Bootstrap datetimepicker：当用户点击输入时显示日历弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45371822/
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
Bootstrap datetimepicker: show calendar pop-up when a user clicks on input
提问by I'll-Be-Back
Is there a way to show calendar when a user clicks on inputas well? Right now I have to click on the calendar icon which will then show calendar.
有没有办法在用户点击输入时显示日历？现在我必须点击日历图标，然后将显示日历。
HTML:
HTML：
<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>
JavaScript:
JavaScript：
$(function() {
$('#datetimepicker1').datetimepicker();
});
Example: https://jsfiddle.net/8jpmkcr5/81/
回答by VincenzoC
You can simply use allowInputToggleoption setting it to true(Default: false). As docs says:
您可以简单地使用allowInputToggle选项将其设置为true（默认值：）false。正如文档所说：
If
true, the picker will show on textbox focus and icon click when used in a button group
如果
true，当在按钮组中使用时，选择器将显示在文本框焦点和图标单击上
Here a working live sample:
这是一个有效的实时示例：
$('#datetimepicker1').datetimepicker({
allowInputToggle: true
});<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<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 DavidG
It's a little tricky, but you need to move the datetime picker to the input and manually handle the click on the input group addon. For example:
这有点棘手，但您需要将日期时间选择器移动到输入并手动处理输入组插件上的点击。例如：
$(function() {
$('.datetimepicker').datetimepicker();
$('.datetimepicker-addon').on('click', function() {
$(this).prev('input.datetimepicker').data('DateTimePicker').toggle();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<div class='input-group date'>
<input type='text' class="form-control datetimepicker" />
<span class="input-group-addon datetimepicker-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>