引导日期选择器隐藏选择日期范围

Question

我使用了引导日期选择器。现在，当我选择“自定义”以外的日期范围时，日期选择器会隐藏。当我选择“自定义”以外的选项并在单击“应用”时关闭时，我希望它保持可见

$('#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 + ')");
});

Answer 1

所以，您的问题是 Predefined Ranges 被视为提交按钮，就像应用按钮一样！这就是为什么单击任何范围后日历会隐藏的原因。

要首先实现您想要的，您必须在使用库中的 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 选项！