Я пытался найти решение моей проблемы с jquery ui datepicker, и мне не повезло. Вот что я пытаюсь сделать ...
У меня есть приложение, в котором я выполняю сложный PHP для возврата массива дат JSON, который я хочу ЗАБЛОКИРОВАТЬ из Jquery UI Datepicker. Я возвращаю этот массив:
["2013-03-14","2013-03-15","2013-03-16"]
Разве нет простого способа просто сказать: заблокировать эти даты из набора даты?
Я прочитал документацию по пользовательскому интерфейсу и не вижу ничего, что могло бы мне помочь. У кого-нибудь есть идеи?
jquery-ui
jquery-ui-datepicker
Дэниел Уайт
источник
источник
Ответы:
Вы можете использовать beforeShowDay для этого
В следующем примере отключаются даты с 14 марта 2013 г. по 16 марта 2013 г.
var array = ["2013-03-14","2013-03-15","2013-03-16"] $('input').datepicker({ beforeShowDay: function(date){ var string = jQuery.datepicker.formatDate('yy-mm-dd', date); return [ array.indexOf(string) == -1 ] } });
Демо: Fiddle
источник
return array.indexOf(string) != -1 ? [false] : $.datepicker.noWeekends(date);
IE 8 не имеет функции indexOf, поэтому вместо этого я использовал jQuery inArray.
$('input').datepicker({ beforeShowDay: function(date){ var string = jQuery.datepicker.formatDate('yy-mm-dd', date); return [$.inArray(string, array) == -1]; } });
источник
Если вы также хотите заблокировать воскресенье (или другие дни), а также массив дат, я использую этот код:
jQuery(function($){ var disabledDays = [ "27-4-2016", "25-12-2016", "26-12-2016", "4-4-2017", "5-4-2017", "6-4-2017", "6-4-2016", "7-4-2017", "8-4-2017", "9-4-2017" ]; //replace these with the id's of your datepickers $("#id-of-first-datepicker,#id-of-second-datepicker").datepicker({ beforeShowDay: function(date){ var day = date.getDay(); var string = jQuery.datepicker.formatDate('d-m-yy', date); var isDisabled = ($.inArray(string, disabledDays) != -1); //day != 0 disables all Sundays return [day != 0 && !isDisabled]; } }); });
источник
$('input').datepicker({ beforeShowDay: function(date){ var string = jQuery.datepicker.formatDate('yy-mm-dd', date); return [ array.indexOf(string) == -1 ] } });
источник
beforeShowDate у меня не сработал, поэтому я пошел дальше и разработал собственное решение:
$('#embeded_calendar').datepicker({ minDate: date, localToday:datePlusOne, changeDate: true, changeMonth: true, changeYear: true, yearRange: "-120:+1", onSelect: function(selectedDateFormatted){ var selectedDate = $("#embeded_calendar").datepicker('getDate'); deactivateDates(selectedDate); } }); var excludedDates = [ "10-20-2017","10-21-2016", "11-21-2016"]; deactivateDates(new Date()); function deactivateDates(selectedDate){ setTimeout(function(){ var thisMonthExcludedDates = thisMonthDates(selectedDate); thisMonthExcludedDates = getDaysfromDate(thisMonthExcludedDates); var excludedTDs = page.find('td[data-handler="selectDay"]').filter(function(){ return $.inArray( $(this).text(), thisMonthExcludedDates) >= 0 }); excludedTDs.unbind('click').addClass('ui-datepicker-unselectable'); }, 10); } function thisMonthDates(date){ return $.grep( excludedDates, function( n){ var dateParts = n.split("-"); return dateParts[0] == date.getMonth() + 1 && dateParts[2] == date.getYear() + 1900; }); } function getDaysfromDate(datesArray){ return $.map( datesArray, function( n){ return n.split("-")[1]; }); }
источник
Для ДД-ММ-ГГ используйте этот код:
var array = ["03-03-2017 ', '03-10-2017', '03-25-2017"]
$('#datepicker').datepicker({ beforeShowDay: function(date){ var string = jQuery.datepicker.formatDate('dd-mm-yy', date); return [ array.indexOf(string) == -1 ] } }); function highlightDays(date) { for (var i = 0; i < dates.length; i++) { if (new Date(dates[i]).toString() == date.toString()) { return [true, 'highlight']; } } return [true, '']; }
источник
Если вы хотите отключить конкретную дату (даты) в jquery datepicker, то вот простая демонстрация для вас.
<script type="text/javascript"> var arrDisabledDates = {}; arrDisabledDates[new Date("08/28/2017")] = new Date("08/28/2017"); arrDisabledDates[new Date("12/23/2017")] = new Date("12/23/2017"); $(".datepicker").datepicker({ dateFormat: "dd/mm/yy", beforeShowDay: function (date) { var day = date.getDay(), bDisable = arrDisabledDates[date]; if (bDisable) return [false, "", ""] } }); </script>
источник