Пользовательский интерфейс jQuery DateRangePicker не пуст

Question

tl;dr: Как предотвратить ввод пустых дат в jquery-ui-daterangepicker?

Я использую http://tamble.github.io/jquery-ui-daterangepicker/ и у меня возникают проблемы с проверкой выбора диапазона дат. Я намерен сохранить #export_date_rangedaterangepicker открыть до тех пор, пока не будет выбран правильный диапазон дат, а затем использовать выбранный диапазон дат для создания CSV-данных в выбранном диапазоне дат.

Вот что я делаю, чтобы инициализировать daterangepicker:

$(window).on('load', function() {
    // Creates the daterangepicker.
    $('#export_date_range')
        .daterangepicker({
            initialText: 'Select Date Range',
            applyButtonText: 'Export Date Range',
            clear: function() {
                // Keep the daterangepicker open.
                $('#export_date_range').daterangepicker('open');
            },
            cancel: function() {
                // Close the modal.
                parent.$.fancybox.close();
            },
            change: function(event) {
                var selected_range = $('#export_date_range').daterangepicker('getRange');

                if (selected_range === {}) {
                    // No date range is selected.
                    // Alert the user.
                    alert('Select Date Range');
                    // Reopen the daterangepicker.
                    $('#export_date_range').daterangepicker('open');
                } else {
                    // Set the start date and end date.
                    var start_date = selected_range.start.getFullYear() + '-' + (selected_range.start.getMonth() + 1) + '-' + selected_range.start.getDate();
                    var end_date   = selected_range.end.getFullYear() + '-' + (selected_range.end.getMonth() + 1) + '-' + selected_range.end.getDate();

                    // Perform an AJAX to generate and download the CSV.
                    getCSV(start_date, end_date);
                }
            },
            close: function(event) {
                if (event.currentTarget.innerText === 'Export Date Range') {
                    // Trigger change event?
                    // $('#export_date_range').daterangepicker('change');
                    // daterangepickerchange
                    $('#export_date_range').trigger('daterangepickerchange');
                }
            }
        })
        // Open the daterangepicker.
        .daterangepicker('open');
});

Когда я звоню $('#export_date_range').daterangepicker('getRange'); внутри close обратный вызов, он всегда возвращает null, Я верю #export_date_rangedaterangepicker деинициализируется, когда close происходит обратный вызов, поэтому я не могу получить выбранный диапазон дат.

Я думаю о запуске daterangepickerchange событие на #export_date_range элемент внутри close Обратный звонок, но мне пока не повезло.

Answer 1

Вы получите значение по $('#export_date_range').daterangepicker('getRange') только после close заканчивает исполнение Скоро close событие, которое вы не можете использовать напрямую, потому что вы получите предыдущее значение, которое пусто для первого события сработало. Вы можете применить тайм-аут, чтобы close завершение мероприятия. как это:

setTimeout(function() {
    var range = $('#export_date_range').daterangepicker('getRange');
    console.log(range);
    if (!range || !range.start || !range.end) {
      // The user clicked outside of the daterangepicker.
      // Reopen the daterangepicker.
      $('#export_date_range').daterangepicker('open');
    }
}, 10);

jsfiddle: http://jsfiddle.net/rtwoeuzf/53/