如果日期范围包含禁用日期，则更改 jQuery 日期范围选择器以禁止日期范围

Question

我创建了一个 jQuery 日期范围选择器。我可以选择日期范围并将它们显示在文本框中。现在我需要的是，我需要禁用某些日期并为这些日期分配不同的类。

E.g. I must be able to give class A to April 2, class B to April 4 etc.

我已经尝试了我在谷歌搜索时得到的结果，但没有任何帮助。我想做的是传递一些应该分配给这些日期的日期和课程。该课程应分配给这些日期，而且我必须可以选择启用或禁用这些日期。

接下来我要做的是，如果两个日期之间有一个禁用日期，则无法选择该范围。

E.g. Suppose I want to select April 2 to April 7 and April 5 is a disabled date. 
Then I could be able to select either April 2 to April 4 or April 6 to April 7.

这意味着只能选择一个范围。请帮忙解决这个问题。

请找小提琴here:

Answer 1

您必须创建两个数组，一个将 css 类映射到您要禁用的每个日期class:date，另一个将 css 类映射到您要提供特殊类的日期，然后：

1. 在beforeShowDay内部，检查日期是否在disabled dates数组中，如果找到，使用关联类并返回false，例如：[false,"classA"]，如果没有，则检查特殊数组并返回class 为 true，否则就做你现在正在做的任何事情。
2. 在onSelect 内，检查所选范围是否包含数组中的任何日期并采取相应措施
3. 然后在class:date 数组中，您可以添加任何您希望使用自己的类禁用的class:date，代码将处理它

完整的工作解决方案here。

注意事项：

1. 代码禁用了 4 月 22 日和 5 月 15 日（尝试使用日期）
2. 代码为 4 月 15 日和 5 月 10 日提供了一个特殊类别。
3. css 类在td 上作为background-color 应用，它不能正确显示，您必须修改选择器的css 才能这样做
4. 帮助我提供此答案的参考是here

Answer 2

您需要实现beforeShowDay和onSelect函数，如下例所示：

http://jsfiddle.net/salman/H3ra3/

代码可能看起来令人生畏，但事实并非如此。基本情况如下：

dateConfig 变量

日期信息存储在一个关联数组中，我们在其中存储日期是否可选择和/或它的 CSS 类名。

beforeShowDay

设date 为调用函数的日期
让date1 成为开始日期文本框中的日期
让date2 成为结束日期文本框中的日期

• 如果date 不可选择，则
  返回[false, date_class or ""]
• 如果用户选择了date1
  • 如果用户选择了date2 并且date 介于date1 ...date2 之间，则
    返回[true, selected_class]
  • 如果date 小于date1 那么
    返回[false, date_class or ""]（不允许第二个日期小于第一个日期）
  • 如果date 等于date1 那么
    返回[true, selected_class]（允许第二个日期与第一个相同）
  • 返回[true, date_class or ""]

onSelect

让date1 成为开始日期文本框中的日期 让date2 成为结束日期文本框中的日期

• 如果用户选择了date1 和date2，那么
  • 遍历所有不可选择的日期
  • 如果不可选择的日期在date1 ...date2 之间，则抛出错误