2017-04-21 236 views
0

IM一個JavaScript/jQuery的的n00b所以容忍我jQuery的日期選擇器禁用日期 - 多範圍

我有包含與STARTDATE &結束日期列多行數據庫

我對頁面中的一個表datepicker jquery元素

我需要它做的是在頁面加載檢查數據庫表和所有日期從startdate到enddate被禁用 我有下面這將做個別日期,但我不知道如何獲得它循環並禁用多個條目(r安格斯 - 從日期至今)

例如24-4-2017至26-4-2017禁用也30-4-2017至17-5-2017禁用

所以多個範圍需要禁用

代碼我有這麼遠低於,請幫傢伙的Ive絞盡腦汁在這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

ü可以做一個小提琴 –

回答

1

只是比較當前與呈遞禁用日期範圍的一天。

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

相關問題