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

当我在$('#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);

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

jQuery UI DateRangePicker验证不为空

1 个答案: