bootstrap datepicker шторы при выборе диапазонов дат

Question

я использовал бутстрап datepicker. Теперь, когда я выбираю диапазон дат, отличный от «custom», который скрывает datepicker. Я хочу, чтобы это видно, когда я выбрать другие, чем «обычай» и чем закрытий на нажатия опции «применить»

$('#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

Итак, ваша проблема в том, что Предустановленные диапазоны рассматриваются как кнопка отправки так же, как применить кнопка! и поэтому календарь будет скрываться после нажатия любого из диапазонов.

Чтобы достичь того, чего вы хотите, сначала вы должны добавить display: block!important когда календарь отображается с помощью show.daterangepicker события из библиотеки, ваш код будет выглядеть примерно так

$('#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, как раньше!