Javascript jQuery UI DateRangePicker验证不为空

tl；dr：如何防止在jquery ui daterangepicker中输入空白日期？

我正在使用，但在验证是否选择了日期范围时遇到问题。我打算保持

#export_date_range

daterangepicker

打开，直到选择了有效的日期范围，然后使用所选日期范围在所选日期范围内生成CSV数据

下面是我初始化日期范围选择器的步骤：

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

。我相信

关闭

回调发生时，

导出日期范围

日期范围选择器

已取消初始化，因此我无法检索所选日期范围

---

我正在考虑在

关闭

回调中的

导出日期范围

元素上触发

日期范围选择器更改

事件，但我还没有任何运气。

只有在

关闭

完成执行后，您才能通过

$（“#导出日期范围”）获得值。日期范围选择器（'getRange'）

。因此，在

close

event上，您不能直接使用它，因为您将获得上一个值，对于第一个激发的事件，该值为空。您可以应用超时技巧，让

关闭

事件完成。像这样：

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);

---

jsiddle:

如果执行$（'#export_date_range'）.val（），会发生什么？创建一个jsiddle，它将帮助某人answer@LukeBecker这里是输入：

这里是我在

daterangepicker

close

处理程序中的内容：

console.log（$（'export\u date\u range'）.val（））

当我在没有选择日期范围的情况下单击

Apply

时，结果是

none

当我在选择日期范围后单击

Apply

时，结果仍然是

none

@mamnashardar这里是链接：@MichaelHurley当我运行提供的代码时，console.log（$（''export\u date\u range'）.val（））；返回具有开始和结束时间的对象。我也看不到应用按钮，但如果我选择一个日期范围并单击“导出日期范围”，它似乎可以工作并在开发人员控制台中记录日期。