jQuery UI Datepicker - 在 min/maxdate 中排除禁用日期

Posted 2023-05-07

【中文标题】jQuery UI Datepicker - 在 min/maxdate 中排除禁用日期

【英文标题】：jQuery UI Datepicker - Exclude Disabled Dates in min/maxdate

【发布时间】：2013-02-05 15:45:56

【问题描述】：

我正在使用 jQuery UI 日期选择器，并在 beforeShowDay 上使用 noWeekends 方法来禁用周末选择。结合这一点，我想设置从今天开始的 5 天和 -5 天的最小和最大日期。

我遇到的问题是，我不希望周末包含在这 5 天的跨度中。我希望它是 5 SELECTABLE 天的最小值和最大值，而不是一般的天数。我只希望在 min 和 maxdate 范围内计算未禁用的日期。

示例：如果在过去 45 天内有 2 天被禁用，则 45 的 Mindate 实际上是 47（如果包括禁用日期）。

http://jsfiddle.net/corydorning/8mp5W/

// what I need
$('.date').datepicker(
    maxDate: 5, // 5 selectable days
    minDate: -5, // -5 selectable days
    beforeShowDay: $.datepicker.noWeekends
);

注意：我正在寻找一种适用于任何禁用日期的解决方案，而不仅仅是周末。我只是在这个例子中使用了周末，因为它是最容易表示的并且是 jQuery UI 内置的。

【问题讨论】：

不会将您的最小值和最大值从五个更改为七个，并结合 .noWeekends 解决您的问题吗？

是的。但如果使用 45 的最小/最大日期，则无法手动计算添加到一周中每一天的最小或最大日期的天数。

您好，您的问题解决了吗？

【参考方案1】：

像这样编辑beforeShowDay 函数：

$('.date').datepicker(
    maxDate: 5,
    minDate: -5,
    beforeShowDay: function (date) 
        var day = date.getDay();
        //disable Tuesdays
        return [(day != 2), ""];
    
);

在此处查看小提琴：http://jsfiddle.net/8mp5W/1/

使用该范例，您应该能够创建一个您不希望显示的日期列表（与仅周二等相比）。

我认为这回答了您关于如何获得自定义可用日期的能力的问题。

编辑

以下 javascript 通过从今天的日期倒数并在运行计数时跳过周末日期 [0,6] 来设置 minDate。它会在到达您想要的 # 天后停止。

它可以变得更高效，并且应该被参数化等等，但是我将把调整和定制留给你。查找maxDate 的工作方式相同，但将日期提前。

$(window).load(function()
  $('.date').datepicker(
    minDate: findMin (),
    beforeShowDay: $.datepicker.noWeekends
  );
);


function findMin () 
        var today = new Date();
        var invalidWeekdays = [0,6]; //weekdays to disregard
        var validDaysPrior = 5; //number of days to count back

        var i = 0;
        while (i < validDaysPrior) 
           today.setDate(today.getDate()-1); //decrement day
           console.log("today is", today);
           var todayWeekday = today.getDay();
           if ( jQuery.inArray(todayWeekday, invalidWeekdays) < 0 ) 
               console.log(todayWeekday + " is valid");
               i++;
            else 
               console.log(todayWeekday + " is NOT valid");
           
        
        console.log(validDaysPrior + " valid days ago occurred on " + today);
        return today;

【讨论】：

禁用日期没有问题。我已经完成了。我遇到的问题是 jQuery UI 将禁用日期计算为 min 和 maxdate 的一部分。使用您的示例，我不希望将星期二计入您设置为最大值和最小值的 25 天。从今天开始应该是 25 天，不包括实际上是 28 天的星期二，因为在此期间禁用了 3 个星期二。

难道您不能只遍历附近的一组日期并排除您不想要的日期，同时将计数器增加到 25，例如？在您的要求中具体说明。您似乎想了解如何操作日期的方法，而我提供的方法是合理的。

我尽量做到具体。我已经尝试枚举来计算禁用天数，但仍然有问题。假设我选择 45 天的 minDate。如果我计算今天和 45 天前之间禁用的天数（比如有 20 天）并将该数字添加到 45，这意味着我的 45 应该是 65。问题是我没有考虑到现在在 45 到 65 之间禁用。 /抓挠我的头

我的问题仅与计算 min 和 maxdate 有关，以便禁用日期不计入给定的 min/maxdate 范围内。我编辑了我的问题，希望它更清楚。

嗨，马克，你的小提琴很有帮助。我想禁用从数据库中获得的多个日期。我怎么能写不止一个而不是 2 或 3 那里。我尝试使用 2,3 但它不起作用。我在 var open_days = 2,3; 之类的 var 中有日期如果您能就此提出建议，将会非常有帮助。

【参考方案2】：

您可以尝试以下代码：get_date() 在我的代码中通过 ajax 调用。你可以创建一个数组。然后在那里输入一个日期。

window.natDays = [];
$.ajax(
  type : "POST",
  async : false,
  url : rootPath + '/get_date',
  data : "ajax=true",
  success : function(msg) 
    var a = $.parseJSON(msg);
    $i = 0;
    $.each(a, function(key, value) 
      arr = (value.Date['date']).split('-');
      arr2[key] = new Array(value.Date['month'], arr[2],
          value.Date['occassion']);
    );
    natDays = arr2;
  
);
var dateMaxforswitch = new Date();
dateMinforswitch.setDate(dateMinforswitch.getDate()
    + (dateMinforswitch.getHours() >= 17 ? 1 : 0));
dateMaxforswitch.setDate(dateMaxforswitch.getDate()
    + (dateMaxforswitch.getHours() >= 17 ? 1 : 0));
AddBusinessDays(dateMaxforswitch, 25);

function AddBusinessDays(curdate, weekDaysToAdd) 
  while (weekDaysToAdd > 0) 
    curdate.setDate(curdate.getDate() + 1);
    // check if current day is business day
    if (noWeekendsOrHolidays(curdate)[0]) 
      weekDaysToAdd--;
    
  


function noWeekendsOrHolidays(date) 
  var noWeekend = $.datepicker.noWeekends(date);
  if (noWeekend[0]) 
    return nationalDays(date);
   else 
    return noWeekend;
  

function nationalDays(date) 
  for (i = 0; i < natDays.length; i++) // alert(natDays[i][2]);
    if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) 
      return [ false, natDays[i][2] + '_day' ];
    
  
  return [ true, '' ];