2017-04-21 195 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">

相关问题