jQuery UI DateRangePicker验证不为空

Question

tl;dr:如何防止在jquery daterangepicker中输入空白日期？

我正在使用http://tamble.github.io/jquery-ui-daterangepicker/，并且我在验证是否选择了日期范围时遇到了困难。我打算让#export_date_range daterangepicker保持打开状态，直到选择了有效的日期范围，然后使用选定的日期范围在选定的日期范围内生成数据的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_range daterangepicker在发生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);

小提琴手：http://jsfiddle.net/rtwoeuzf/53/