jQuery UI Datepicker - 排除最小/最大日期中的禁用日期

标签 jquery jquery-ui datepicker jquery-ui-datepicker

我正在使用 jQuery UI 日期选择器,并在 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 中。

最佳答案

编辑 beforeShowDay 函数,如下所示:

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

请参阅此处的 fiddle :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 Datepicker - 排除最小/最大日期中的禁用日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14983284/

相关文章:

jquery - 如何用更高性能的等效函数替换 .each() 和 .find() 等 JQuery 函数?

javascript - jQuery 中存在空格或不输出

javascript - 如何在jquery日期选择器字段附近创建前一天和后一天的链接

ios - 如何使用 ActionSheetDatePicker 获取准确的日期?

jQuery UI - 自动完成生成的内联样式覆盖?

javascript - Bootstrap datepicker 日期比较错误(英国/美国格式错误)

javascript - JS - 重写 tyself 的函数混淆

javascript - if else 语句未到达 else 部分

php - 保存到数据库的 jQuery Portlet

jquery-ui - 如何保存可拖动元素和可调整大小元素的位置?