twitter-bootstrap 引导日期时间选择器，单击图像时显示对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22472679/
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 datetime picker, show dialogue when clicking on image
提问by Raghvendra Singh
I am using bootstrap date time picker for an input.
我正在使用引导程序日期时间选择器进行输入。
i have the following html div defined
我定义了以下 html div
<div class="form-group">
<label for="movingDate">Moving Date</label>
<div class="input-group date ui-datepicker">
<input type="text" id="prefMovingDate" name="movingDateTime" class="form-control" data-required="true">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
And this javascript to enable bootstrap datetime picker
而这个 javascript 来启用引导程序日期时间选择器
$('#prefMovingDate').datetimepicker({
format : 'd-M-yyyy H:ii P',
autoclose : true,
});
The output is following
输出如下
Now when i click on the text box i see this
现在，当我点击文本框时，我看到了这个
This is fine, but what i want is that the pop up for date selection should come even when the little calendar icon is clicked as well. I tries various approaches but i can't get my head around it. Any help on this will be greatly appreciated.
这很好，但我想要的是，即使点击小日历图标，日期选择的弹出窗口也应该出现。我尝试了各种方法，但我无法理解。对此的任何帮助将不胜感激。
回答by Jai
Try an click event on your calendar icon and trigger the focus on input #prefMovingDate:
在您的日历图标上尝试点击事件并触发对输入的关注#prefMovingDate：
$('.input-group').find('.fa-calendar').on('click', function(){
$(this).parent().siblings('#prefMovingDate').trigger('focus');
});
or if this id #prefMovingDateis unique to the page then you can simply do this:
或者如果这个 id#prefMovingDate是页面唯一的，那么你可以简单地这样做：
$('.input-group').find('.fa-calendar').on('click', function(){
$('#prefMovingDate').trigger('focus');
});
回答by Tepken Vannkorn
I was having similar issue. My problem was that the calendar icon click shows the calendar dropdown but not the input box. However, the new version of the Bootstrap DateTime Picker provide the allowInputToggleto enable the input to work as well.
我有类似的问题。我的问题是，点击日历图标会显示日历下拉列表，而不是输入框。但是，新版本的 Bootstrap DateTime Picker 提供了allowInputToggle使输入也能工作。
HTML:
HTML：
<div class="form-group">
<div class='input-group date datetimepicker'>
<label class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</label>
<input type='search' name="s" class="form-control" placeholder="Search News By Calendar..." />
<span class="input-group-addon">
<button type="submit" class="btn btn-primary"></button>
</span>
</div>
</div>
JavaScript:
JavaScript：
$( '.datetimepicker' ).datetimepicker({
'format' : 'YYYY-MM-DD',
'allowInputToggle' : true
});
See this https://github.com/Eonasdan/bootstrap-datetimepicker/issues/704
看到这个https://github.com/Eonasdan/bootstrap-datetimepicker/issues/704
