Change jQuery daterange picker to forbid date range if it contains disabled dates

I created jQuery date range picker. I can select date ranges and show them in the text box. Now I need, I need to disable certain dates and assign different classes for these dates.

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

I tried the results that I got while I searched Google, but nothing helped. What I'm trying to do is pass in some dates and classes that should be assigned to these dates. This class must be assigned to these dates, plus I must have a parameter to enable or disable these dates.

The next thing I'm trying to do is set the trip date between two dates, then this range cannot be selected.

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.

This means that only one range can be selected. Please help solve this problem.

Find the fiddle here :

+4
source share
2 answers

You need to create two arrays that map the css class to each date you want to disable class:date, and one that displays the css class to the date you want to give to the special class, and then:

  • Inside, beforeShowDaycheck if the date is in the array of disabled dates, and if you find it, use the associated class and return false, for example: [false,"classA"]if not, check the special array and return the class with true, otherwise just do what you are doing right now.
  • onSelect , .
  • class:date class:date, ,

.

:

  • 22 15 ( )
  • 15 10 .
  • css background-color td, , css ,
  • , ,
+5

beforeShowDay onSelect, :

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

, . :

dateConfig

, , AND/OR CSS.

beforeShowDay

date - , date1 -
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 - .

  • date1 date2,
    • date1 ...date2,
+2

Source: https://habr.com/ru/post/1535866/


All Articles