jQuery Bootstrap 日期选择器在选择后隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21151830/
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 datepicker hide after selection
提问by jheul
How do I hide the calendar after a date is selected? Is there a specific function that I can use? My code below:
选择日期后如何隐藏日历？有我可以使用的特定功能吗？我的代码如下：
$('#dp1').datepicker({
format: 'mm-dd-yyyy',
startDate: '-15d',
autoclose: true,
endDate: '+0d' // there's no convenient "right now" notation yet
});
Any help would be appreciated.
任何帮助，将不胜感激。
回答by Felix
You can use event changedate()to keep track of when the date is changed together with datepicker('hide')method to hide the datepickerafter making selection:
您可以使用 eventchangedate()来跟踪日期何时更改以及datepicker('hide')隐藏datepicker选择后的方法：
$('yourpickerid').on('changeDate', function(ev){
$(this).datepicker('hide');
});
UPDATE
更新
This was the bug with autoclose: true. This bug was fixed in latest master. SEE THE COMMIT. Get the latest code from GitHub
回答by Ola
If it's any help to anyone, the Version 2.0 of the bootstrap datepicker no longer works with the accepted answer.
如果对任何人有帮助，引导日期选择器的 2.0 版不再适用于已接受的答案。
Here's how I got it working on mine:
这是我如何让它在我的工作：
$('yourpickerid').datepicker({
format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
$(this).datepicker('hide');
});
See http://bootstrap-datepicker.readthedocs.org/en/latest/events.html#changedate
请参阅http://bootstrap-datepicker.readthedocs.org/en/latest/events.html#changedate
回答by MaxEcho
$('#input').datepicker({autoclose:true});
回答by user3674664
If you're looking to override the behavior of the calendar in general, globally, try editing the Datepicker function (in my example it was line 82),
如果您希望在全局范围内覆盖日历的一般行为，请尝试编辑 Datepicker 函数（在我的示例中为第 82 行），
from
从
this.autoclose = false;
to
到
this.autoclose = true;
Worked fine for me, as I wanted to have all my calendar instances behave the same.
对我来说效果很好，因为我希望所有日历实例的行为都相同。
回答by papacho
The problem can be stopped, blocking hide event for input element by this linese:
可以通过以下方式停止问题，阻止输入元素的隐藏事件：
var your_options = { ... };
$('.datetimepicker').datetimepicker(your_options).on('hide', function (e) {
e.preventDefault();
e.stopPropagation();
});回答by user3615318
- Simply open the
bootstrap-datepicker.js - find :
var defaults = $.fn.datepicker.defaults - set
autoclose: true
- 只需打开
bootstrap-datepicker.js - 找 ：
var defaults = $.fn.datepicker.defaults - 放
autoclose: true
Save and refresh your project and this should do.
保存并刷新您的项目，这应该可以。
回答by Ankit24007
In bootstrap 4 use "autoHide : true"
在引导程序 4 中使用“autoHide：true”
$('#datepicker1').datepicker({
autoHide: true,
format: 'mm-yyyy',
endDate: new Date()
});
回答by Gosha
Close datetimepicker when date select(datetimepicker show date with time)
选择日期时关闭日期时间选择器（日期时间选择器显示带时间的日期）
$('.datepicker').datepicker({
autoclose: true,
closeOnDateSelect: true
});
回答by mirmo
$('yourpickerid').datetimepicker({
pickTime: false
}).on('changeDate', function (e) {
$(this).datetimepicker('hide');
});
回答by Vladimir Kulakov
You can change source code, bootstrap-datepicker.js.
Add this.hide();like ne
您可以更改源代码bootstrap-datepicker.js。添加this.hide();喜欢 ne
if (this.viewMode !== 0) {
this.date = new Date(this.viewDate);
this.element.trigger({
type: 'changeDate',
date: this.date,
viewMode: DPGlobal.modes[this.viewMode].clsName
});
this.hide();//here
}
