0

在此处的一些帮助下，我创建了一个脚本来禁用 jQuery DatePicker 中一周中的某些天。现在我想添加禁用特定时间段（计划假期）的选项。例如。2012 年 8 月 12 日至 2012 年 8 月 30 日。谁能帮我把它包含在下面的脚本中？

我正在使用 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>
4

3 回答 3

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;
            }
  });
});
于 2015-10-22T04:55:03.133 回答
0

我在这里为这个解决方案创建了一个小提琴。

它模拟从“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), ''];
}​

您显然需要自己从某个地方获取计划的假期，而不是像我那样“硬编码”日期。:) 您可以以类似的方式满足公共假期的需求。

于 2012-05-20T12:32:33.810 回答
0

您可以使用以下代码禁用特定日期范围您可以在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 });

这是一个工作小提琴。

工作演示

于 2012-05-20T12:34:40.823 回答