如果日期范围包含禁用日期，请更改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类映射你想要被禁用的每个Date class:date，另一个用css类映射你想要给它一个特殊类的日期，然后：

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

完整的解决方案here。

注意：

1. 该代码禁用了4月22日和5月15日（尝试使用日期）
2. 该代码为4月15日和5月10日提供了一个特殊课程。
3. css类适用background-color作为td，它没有正确显示，您必须修改选择器的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]（允许第二个日期与第一个日期相同）
  • return [true, date_class or ""]

<强> onSelect

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

• 如果用户选择了date1和date2，那么
  • 迭代所有不可选择的日期
  • 如果不可选择的日期介于date1 ...date2之间，则会抛出错误