2017-04-21 14 views
0

im a Javascript/jQuery n00b so mit mir tragenjQuery Datepicker deaktiviert dates - mehrere Bereiche

Ich habe eine Tabelle in der Datenbank, die mehrere Zeilen mit Startdatum & enddate Spalten

Ich habe auf der Seite ein enthält datepicker jquery element

Was ich es tun muss, ist auf der Seite laden überprüfen Sie die Datenbanktabelle und alle Daten von Startdatum zu Enddatum deaktiviert zu sein Ich habe die unten, die individuelle Daten tun würde, aber ich weiß nicht, wie zu bekommen es um mehrere Einträge zu loopen und zu sperren (r anges - von Datum bis heute)

Zum Beispiel 24-4-2017 bis 26-4-2017 auch

so mehrere Bereiche müssen deaktiviert werden

30-4-2017 bis 17-5-2017 deaktiviert

deaktiviert

-Code ich habe so weit unten, bitte helfen Jungs mein Gehirn über diese 2 Tage jetzt Ive Abstich und hat schweren Codeblock

 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

kann u tun, um eine Geige –

Antwort

1

einfach den Tag vergleichen, die gerade Rendering mit deaktivierter Tagen reichen.

$(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">