JQuery UI DateRangePicker Validate Not Empty

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, но мне пока не повезло.

Что произойдет, если вы выполните $ ('# export_date_range'). Val ()?

Luke Becker 23.07.2018 23:18

создать jsfiddle, который поможет кому-то ответить

Mamun Sardar 24.07.2018 11:43

@Luke Becker Вот ввод: <input type = "text" id = "export_date_range" value = "none" /> Вот что у меня в обработчике daterangepickerclose: console.info($('#export_date_range').val()); Когда я нажимаю Apply без выбора диапазона дат, результат будет none Когда я нажимаю Apply после выбора диапазона дат, результат все равно none

Michael Hurley 24.07.2018 14:36

@MamunSardar вот ссылка: jsfiddle.net/rtwoeuzf/19

Michael Hurley 24.07.2018 14:51

@MichaelHurley, когда я запускаю предоставленный код, console.info ($ ('# export_date_range'). Val ()); возвращает объект с начальным и конечным временем. Я также не вижу кнопки «Применить», но если я выберу диапазон дат и нажму «Экспортировать диапазон дат», он будет работать и записать дату в консоли разработчика.

Luke Becker 24.07.2018 18:06

@LukeBecker, куда ты звонишь console.info($('#export_date_range').val());? Я намерен получить выбранный диапазон дат в обратном вызове close в строке 739 jsfiddle.net/craftman32/rtwoeuzf/44

Michael Hurley 24.07.2018 19:37

@MamunSardar @LukeBecker спасибо за помощь! Решение setTimeout у меня сработало. Вдобавок я нашел способ установить диапазон дат по умолчанию на текущую неделю: $('#export_date_range').daterangepicker('setRange', {start: moment().startOf('week').startOf('day').toDate(), end: moment().endOf('week').startOf('day').toDate()});

Michael Hurley 01.08.2018 14:40
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
7
285
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

setTimeout(function() {
    var range = $('#export_date_range').daterangepicker('getRange');
    console.info(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/

Другие вопросы по теме