bootstrap 日期选择器在选择日期范围时隐藏
bootstrap datepicker hides on selecting date ranges
我用过 bootstrap 日期选择器。现在,当我 select 日期范围不是 "custom" 时,日期选择器会隐藏。我想在 select 选项而不是 "custom" 时保持它可见,而不是在单击 "apply"
时关闭
$('#demo').daterangepicker({
ranges: {
"autoApply": true,
"setDate": new Date(),
"dateFormat": 'yy-mm-dd',
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
applyOnMenuSelect: false,
"alwaysShowCalendars": true,
"opens": "left",
"applyClass": "btn-primary",
"cancelClass": "hide-btn",
"startDate": "04/14/2016",
"endDate": "04/14/2016",
"maxDate": "04/14/2016",
}, function(start, end, label) {
console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' +
end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
});
因此,您的问题是 预定义范围 与应用按钮一样被视为提交按钮!这就是为什么在您单击任何范围后日历会隐藏的原因。
要首先实现您想要的效果,您必须在使用库中的 show.daterangepicker
事件显示日历时添加 display: block!important
,您的代码将如下所示
$('#demo').on('show.daterangepicker',function(){
// here we will add a class with display!important in it
$('.daterangepicker').addClass('ishow');
});
不幸的是,您不能直接向按钮添加点击事件,因此我们将使用一些 委托,幸运的是 jQuery 得到了一个很好的简单实现。
$('body').delegate(".applyBtn", "click",function(){
// this will be called when the apply button is clicked
// we will remove the ishow class to hide the menu!
$('.daterangepicker').removeClass('ishow');
});
就是这样!希望它对您的项目有所帮助,这里是 working fiddle 查看实际解决方案。
P.S. : 不要像以前那样使用 autoApply
选项!
我用过 bootstrap 日期选择器。现在,当我 select 日期范围不是 "custom" 时,日期选择器会隐藏。我想在 select 选项而不是 "custom" 时保持它可见,而不是在单击 "apply"
时关闭$('#demo').daterangepicker({
ranges: {
"autoApply": true,
"setDate": new Date(),
"dateFormat": 'yy-mm-dd',
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
applyOnMenuSelect: false,
"alwaysShowCalendars": true,
"opens": "left",
"applyClass": "btn-primary",
"cancelClass": "hide-btn",
"startDate": "04/14/2016",
"endDate": "04/14/2016",
"maxDate": "04/14/2016",
}, function(start, end, label) {
console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' +
end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
});
因此,您的问题是 预定义范围 与应用按钮一样被视为提交按钮!这就是为什么在您单击任何范围后日历会隐藏的原因。
要首先实现您想要的效果,您必须在使用库中的 show.daterangepicker
事件显示日历时添加 display: block!important
,您的代码将如下所示
$('#demo').on('show.daterangepicker',function(){
// here we will add a class with display!important in it
$('.daterangepicker').addClass('ishow');
});
不幸的是,您不能直接向按钮添加点击事件,因此我们将使用一些 委托,幸运的是 jQuery 得到了一个很好的简单实现。
$('body').delegate(".applyBtn", "click",function(){
// this will be called when the apply button is clicked
// we will remove the ishow class to hide the menu!
$('.daterangepicker').removeClass('ishow');
});
就是这样!希望它对您的项目有所帮助,这里是 working fiddle 查看实际解决方案。
P.S. : 不要像以前那样使用 autoApply
选项!