jQuery datepicker禁用日期 - 多个范围

时间:2017-04-21 14:32:49

标签: php jquery datepicker date-range

我是一个javascript / jQuery n00b所以忍受我

我在数据库中有一个包含多行的表,其中包含startdate&结束列

我在页面上有一个datepicker jquery元素

我需要它做的是在页面加载检查数据库表和从startdate到enddate的所有日期被禁用 我有下面哪个会做个别日期但是我不知道如何让它循环并禁用多个条目(范围 - 从日期到日期)

例如24-4-2017至26-4-2017禁用也在30-4-2017至17-5-2017残疾人

因此需要禁用多个范围

我的代码我到目前为止,请帮助那些家伙我已经绞尽脑汁待了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
            });
        });

1 个答案:

答案 0 :(得分:1)

只需将当前呈现的日期与禁用日期范围进行比较。

&#13;
&#13;
$(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];
    }
  });
});
&#13;
<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">
&#13;
&#13;
&#13;