jQuery UI日期选择器 - 排除min/maxdate中禁用的日期

Question

jQuery UI日期选择器 - 排除min/maxdate中禁用的日期

jqueryjquery-uidatepickerjquery-ui-datepicker

3

我正在使用jQuery UI datepicker，并在beforeShowDay上使用noWeekends方法来禁用周末。除此之外，我希望从今天开始设置一个最小和最大日期为5天和-5天。

然而，我的问题是：我不想在这5天范围内包括周末。我希望它是5个可选择的日期的最小和最大值，而不是一般的日期。我只想计算在最小和最大日期范围内没有被禁用的日期。

例如：如果在过去的45天中有2天被禁用，则45的最小日期实际上是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。

- CoryDorning

把你的最小值和最大值从五改为七，再加上.noWeekends，这样不就解决了你的问题吗？ - j08691

是的，但如果使用45的最小/最大日期，您不能手动计算每周要添加到最小或最大日期的天数。 - CoryDorning

嗨，你的问题解决了吗？ - Suvin94

2个回答

0

您可以尝试以下代码：在我的代码中通过ajax调用get_date()函数。您可以创建一个数组，并在其中输入日期。

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, '' ];
}

- Ayesha

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marc · Accepted Answer

将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;
}