jQuery UI DateRangePicker 验证不为空

Question

tl;dr：如何防止在 jquery-ui-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');
});

当我在 close 回调中调用 $('#export_date_range').daterangepicker('getRange'); 时，它总是 returns null。我相信 #export_date_range daterangepicker 在 close 回调发生时被取消初始化，所以我无法检索选定的日期范围。

我正在考虑在 close 回调中的 #export_date_range 元素上触发 daterangepickerchange 事件，但我还没有成功。

Answer 1

只有在 close 完成执行后，您才能通过 $('#export_date_range').daterangepicker('getRange') 获得价值。所以在 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/

jQuery UI DateRangePicker 验证不为空

jQuery UI DateRangePicker Validate Not Empty

javascript

jquery

jquery-ui

daterangepicker