Question

在这里得到一些帮助，我创建了一个脚本来禁用jQuery DatePicker中某些星期几。现在我想添加选项以禁用特定时间段（计划假期）。例如。 12/08/2012 - 30/08/2012。谁能帮我把这个包含在下面的脚本中？

我正在使用jQuery版本1.7.2和jQuery UI 1.8.18。

<script>

$(function() { 
$('input.datepicker').datepicker({

dateFormat: 'DD, d MM, yy',
minDate: "+1d",
changeMonth: false, 
changeYear: false,
showOn: 'both',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true,
beforeShowDay: enableDAYS
},
$.datepicker.regional['nl']);
});

function enableDAYS(date) {
var day = date.getDay();
return [(day > 2 && day < 7), ''];
}

</script>

Answer 1

我已经生成了一个具有以下功能的jQuery日期选择器。

显示从两天开始为期三周的日期
禁用周末选择
禁用已定义的公共假期选择
在工具提示中提供假日说明

查看此plunker了解详情。

// Contains Victorian public holidays which date selection needs to be restricted
var vicHolidays = [
  {
    date: '01/01/2015',
    desc: 'New Year Day'
  }, 
  {
    date: '26/01/2015',
    desc: 'Australia Day'
  },
  {
    date: '09/03/2015',
    desc: 'Labour Day'
  },
  {
    date: '03/04/2015',
    desc: 'Good Friday'
  },
  {
    date: '04/04/2015',
    desc: 'Saturday before Easter Sunday'
  },
  {
    date: '06/04/2015',
    desc: 'Easter Monday'
  },
  {
    date: '25/04/2015',
    desc: 'ANZAC Day'
  },
  {
    date: '08/06/2015',
    desc: 'Queens Birthday'
  },
  {
    date: '02/10/2015',
    desc: 'AFL Grand Final Holiday'
  },
  {
    date: '25/12/2015',
    desc: 'Christmas Day'
  },
  {
    date: '26/12/2015',
    desc: 'Boxing Day'
  },
  {
    date: '28/12/2015',
    desc: 'Boxing Day *Additional Day'
  }
  ];

$(function() {
  $("#datepicker").datepicker({
    firstDay: 1,    // First day of the week
    minDate: 2,     // Start of date selection
    maxDate: '10w',  // End of date selection

    /**
     * A function that takes a date as a parameter and must return an array with:
     * [0]: true/false indicating whether or not this date is selectable
     * [1]: a CSS class name to add to the date's cell or "" for the default presentation
     * [2]: an optional popup tooltip for this date
     * 
     */
    beforeShowDay: function(date) {
                var result = [true, "", ""];
                result = $.datepicker.noWeekends(date);

                if (vicHolidays === null) {
                    result[1] = "";
                } else {
                  // Format the date in the format dd/mm/yy
                    var key = $.datepicker.formatDate("dd/mm/yy", date);

        // Go through the defined Victorian holidays
                  for (var i=0; i<vicHolidays.length; i++) {
          if (key == vicHolidays[i].date) {
                      result[0] = false;
                        result[1] = "dp-highlight-holiday";
                        result[2] = vicHolidays[i].desc;
          }                      
                  }
                }
                return result;
            }
  });
});

Answer 2

我为此解决方案创建了一个小提琴 here 。

它模拟了'2012年5月23日至2012年5月24日'的“计划假期”。

我所做的就是将现有的enableDAYS功能更改为：

function enableDAYS(date) {
var startDate = new Date();
startDate.setFullYear(2012, 4, 22);
var endDate = new Date();
endDate.setFullYear(2012, 4, 24)
var day = date.getDay();
return [(day >= 1 && day < 6) && !(date >= startDate && date <= endDate), ''];
}

你显然需要自己从某个地方获取计划的假期而不是像我那样“硬编码”日期。 :)你可以用类似的方式迎合公众假期。

Answer 3

您可以使用以下代码禁用特定日期范围您可以在dateRange数组中指定日期范围，日期格式为yyyy/MM/dd 因此，要禁用从12/08/2012到30/08/2012的日期，您必须更改dateRange数组，如下所示

var dateRange = ["2012/08/12","2012/08/30"]; // yyyy/MM/dd

以下是小提琴中使用的代码

//  unavailable dates range
var dateRange = ["2012/05/20","2012/05/29"]; // yyyy/MM/dd


function unavailable(date) {
    var startDate = new Date(dateRange[0]);
    var endDate = new Date(dateRange[1]);
    var day = date.getDay();



    if(date > startDate && date < endDate )
        return [false, "disabled"];
    else if(day > 0 && day < 6)
        return [true, "enabled"];
    else 
        return [false, "disabled"];

}

$('input.datepicker').datepicker({ beforeShowDay: unavailable });

这是一个工作小提琴。

Working Demo

如何使用jQuery DatePicker禁用星期几和假日

3 个答案: