Próbowałem znaleźć rozwiązanie mojego problemu z datownikiem interfejsu Jquery i nie mam szczęścia. Oto, co próbuję zrobić ...
Mam aplikację, w której wykonuję skomplikowane PHP, aby zwrócić tablicę JSON z datami, które chcę ZABLOKOWAĆ z Jquery UI Datepicker. Zwracam tę tablicę:
["2013-03-14","2013-03-15","2013-03-16"]
Czy nie ma prostego sposobu, aby po prostu powiedzieć: zablokować te daty w selektorze dat?
Przeczytałem dokumentację interfejsu użytkownika i nie widzę nic, co by mi pomogło. Czy ktoś ma jakieś pomysły?
jquery-ui
jquery-ui-datepicker
Daniel White
źródło
źródło
Odpowiedzi:
Możesz użyć beforeShowDay, aby to zrobić
Poniższy przykład wyłącza daty od 14 marca 2013 do 16 marca 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 ] } });
Demo: Fiddle
źródło
return array.indexOf(string) != -1 ? [false] : $.datepicker.noWeekends(date);
IE 8 nie ma funkcji indexOf, więc zamiast tego użyłem jQuery inArray.
$('input').datepicker({ beforeShowDay: function(date){ var string = jQuery.datepicker.formatDate('yy-mm-dd', date); return [$.inArray(string, array) == -1]; } });
źródło
Jeśli chcesz również zablokować niedziele (lub inne dni), a także tablicę dat, używam tego kodu:
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]; } }); });
źródło
$('input').datepicker({ beforeShowDay: function(date){ var string = jQuery.datepicker.formatDate('yy-mm-dd', date); return [ array.indexOf(string) == -1 ] } });
źródło
beforeShowDate nie działało dla mnie, więc poszedłem do przodu i opracowałem własne rozwiązanie:
$('#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]; }); }
źródło
W przypadku DD-MM-RR użyj tego kodu:
var tablica = [„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, '']; }
źródło
Jeśli chcesz wyłączyć określone daty w jquery datepicker, oto proste demo dla Ciebie.
<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>
źródło