如果日期范围包含禁用日期,请更改jQuery日期范围选择器以禁用日期范围

Leo*_*ham 4 javascript jquery jquery-ui date jquery-ui-datepicker

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

E.g. I must be able to give class A to April 2, class B to April 4 etc.
Run Code Online (Sandbox Code Playgroud)

我尝试了谷歌搜索时得到的结果,但没有任何帮助.我想要做的是传递一些应该分配给那些日期的日期和类.该类应该分配给那些日期加上我必须有选项来启用或禁用这些日期.

我要做的下一件事是,如果在2个日期之间有一个禁用日期,则无法选择该范围.

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.
Run Code Online (Sandbox Code Playgroud)

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

请在这里找到小提琴:

Sar*_*lem 5

您必须创建两个数组,一个用于将css类映射到要禁用的每个Date class:date,另一个用css类映射您想要给出特殊类的日期,然后:

  1. 在里面beforeShowDay,检查日期是否在禁用日期数组中,如果找到它,使用关联的类并返回false,例如:[false,"classA"]如果没有,请检查特殊数组并返回带有true的类,否则只需执行任何操作现在正在做
  2. 在里面onSelect,检查所选范围是否包括数组中的任何日期并采取相应措施
  3. 然后在class:date数组中,您可以class:date使用自己的类添加任何您想要禁用的内容,代码将处理它

全面有效的解决方案在这里.

笔记:

  1. 该代码禁用4月22日和5月15日(尝试使用日期)
  2. 该代码为4月15日和5月10日提供了一个特殊课程.
  3. css类适用于background-coloron td,它没有正确显示,你必须修改picker的css才能执行
  4. 我提供这个答案的参考资料就在这里