Jquery UI DatePicker. Disabilita matrice di date

Ho cercato di cercare una soluzione al mio problema con Jquery ui datepicker e non sto avendo fortuna. Ecco cosa sto cercando di fare …

Ho un’applicazione in cui sto facendo un po ‘di PHP complesso per restituire un array JSON di date che voglio BLOCCATO dall’interfaccia utente di Jquery Datepicker. Sto restituendo questo array:

["2013-03-14","2013-03-15","2013-03-16"] 

Non c’è un modo semplice per dire semplicemente: bloccare queste date dal datepicker?

Ho letto la documentazione dell’interfaccia utente e non vedo nulla che mi aiuti. Qualcuno ha qualche idea?

È ansible utilizzare beforeShowDay per farlo

L’esempio seguente disabilita le date dal 14 marzo 2013 al 16 marzo 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

IE 8 non ha la funzione indexOf, quindi ho usato invece jQuery inArray.

 $('input').datepicker({ beforeShowDay: function(date){ var string = jQuery.datepicker.formatDate('yy-mm-dd', date); return [$.inArray(string, array) == -1]; } }); 

Se vuoi bloccare anche le domeniche (o altri giorni) e la serie di date, io uso questo codice:

 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('dm-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 ] } }); 

Per DD-MM-YY usa questo codice:

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, '']; } 

Se si desidera disabilitare particolari date in jquery datepicker, ecco la semplice demo per te.

  

beforeShowDate non ha funzionato per me, quindi sono andato avanti e ho sviluppato la mia soluzione:

 $('#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]; }); }