如果日期范圍包含禁用日期，請更改jQuery日期范圍選擇器以禁用日期范圍

Question

我創建了一個jQuery日期范圍選擇器。 我可以選擇日期范圍並在文本框中顯示它們。 現在我需要的是，我需要禁用某些日期並為這些日期分配不同的類。

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

我嘗試了谷歌搜索時得到的結果，但沒有任何幫助。 我想要做的是傳遞一些應該分配給那些日期的日期和類。 該類應該分配給那些日期加上我必須有選項來啟用或禁用這些日期。

我要做的下一件事是，如果在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.

這意味着只能選擇一個范圍。 請幫忙解決這個問題。

請在這里找到小提琴：

Answer 1

您必須創建兩個數組，一個用於映射css類，每個日期要禁用class:date ，另一個用css類映射你想要給出特殊類的日期，然后：

1. 在beforeShowDay ，檢查日期是否在禁用日期數組中，如果找到它，使用關聯的類並返回false，例如： [false,"classA"] ，如果沒有，請檢入特殊數組並返回類真的，否則就做你現在正在做的事。
2. 在onSelect ，檢查所選范圍是否包含數組中的任何日期並采取相應措施
3. 然后在class:date數組中，你可以添加任何class:date你希望用自己的類禁用的class:date ，代碼將處理它

全面有效的解決方案在這里 。

筆記：

1. 該代碼禁用4月22日和5月15日（嘗試使用日期）
2. 該代碼為4月15日和5月10日提供了一個特殊課程。
3. css類在td上作為background-color ，它沒有正確顯示，你必須修改選擇器的css才能做到這一點
4. 我提供這個答案的參考資料就在這里

Answer 2

您需要實現beforeShowDay和onSelect函數，如以下演示所示：

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

代碼可能看起來令人生畏，但事實並非如此。 基礎知識如下：

dateConfig變量

日期信息存儲在一個關聯數組中，我們在其中存儲日期是否可選和/或其CSS類名。

beforeShowDay

設date是調用函數的日期
設date1為開始日期文本date1的日期
設date2為結束日期文本date2的日期

• 如果date不可選，那么
  return [false, date_class or ""]
• 如果用戶選擇了date1
  • 如果用戶選擇了date2 ，則date在date1 ...date2之間
    return [true, selected_class]
  • 如果date小於date1那么
    return [false, date_class or ""] （不允許第二個日期小於第一個日期）
  • 如果date等於date1那么
    return [true, selected_class] （允許第二個日期與第一個日期相同）
  • return [true, date_class or ""]

onSelect

讓date1為開始日期文本date2的日期讓date2為結束日期文本date2的日期

• 如果用戶選擇了date1和date2
  • 迭代所有不可選擇的日期
  • 如果date1 ...date2之間的不date1 ...date2日期則拋出錯誤