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, но мне пока не повезло.
создать jsfiddle, который поможет кому-то ответить
@Luke Becker Вот ввод: <input type = "text" id = "export_date_range" value = "none" /> Вот что у меня в обработчике daterangepickerclose: console.info($('#export_date_range').val()); Когда я нажимаю Apply без выбора диапазона дат, результат будет none Когда я нажимаю Apply после выбора диапазона дат, результат все равно none
@MamunSardar вот ссылка: jsfiddle.net/rtwoeuzf/19
@MichaelHurley, когда я запускаю предоставленный код, console.info ($ ('# export_date_range'). Val ()); возвращает объект с начальным и конечным временем. Я также не вижу кнопки «Применить», но если я выберу диапазон дат и нажму «Экспортировать диапазон дат», он будет работать и записать дату в консоли разработчика.
@LukeBecker, куда ты звонишь console.info($('#export_date_range').val());? Я намерен получить выбранный диапазон дат в обратном вызове close в строке 739 jsfiddle.net/craftman32/rtwoeuzf/44
@MamunSardar @LukeBecker спасибо за помощь! Решение setTimeout у меня сработало. Вдобавок я нашел способ установить диапазон дат по умолчанию на текущую неделю: $('#export_date_range').daterangepicker('setRange', {start: moment().startOf('week').startOf('day').toDate(), end: moment().endOf('week').startOf('day').toDate()});



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы получите значение $('#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/
Что произойдет, если вы выполните $ ('# export_date_range'). Val ()?