JQuery DatePicker отключен даты — несколько диапазонов

я javascript / jQuery n00b так терпеть меня

У меня есть таблица в базе данных, которая содержит несколько строк с начальной датой & конечные столбцы

У меня есть на странице элемент datequicker jquery

Что мне нужно сделать, так это при загрузке страницы проверить таблицу базы данных и отключить все даты от начальной даты до конечной даты.
У меня есть ниже, что будет делать отдельные даты, однако я не знаю, как заставить его зациклить и отключить несколько записей (диапазоны — от даты к дате)

Например, отключены с 24-4-2017 по 26-4-2017, также отключены с 30-4-2017 по 17-5-2017

поэтому несколько диапазонов должны быть отключены

Код, который у меня есть ниже, пожалуйста, помогите, ребята, я ломал голову над этим уже 2 дня и у меня серьезный код

        var disabledDays = ["22-04-2017"]; // M-DD-YYYY Format

/* utility functions */
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
for (i = 0; i < disabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
//console.log('bad:  ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
return [false];
}
}
//console.log('good:  ' + (m+1) + '-' + d + '-' + y);
return [true];
}

/*
Above 2 are probably redundant because BaT are open Bank Holidays
and also open weekends so ..
*/

/*
Create DatePicker
Change MaxDate below to show more months
*/
jQuery(document).ready(function() {
jQuery('#date').datepicker({
minDate: new Date(2017, 0, 1),
maxDate: new Date(2017, 6, 31),
dateFormat: 'DD, MM, d, yy',
constrainInput: true,
beforeShowDay: nationaldays
});
});

0

Решение

Просто сравните день, который в данный момент рендерит, с отключенным диапазоном дат.

$(document).ready(function() {
var startDisabledDates = new Date(2017, 03, 10),
endDisabledDates = new Date(2017, 03, 20);

$("#date").datepicker({
beforeShowDay: function(day) {
var isSelectable = day < startDisabledDates || day > endDisabledDates;
return [isSelectable];
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="text" id="date">
1

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector