Select a Range of dates and Highlight in jQuery Datepicker

问题

I am trying to highlight or change the CSS of a range of dates in jQuery Datepicker. I want the user to be able to click the start date and the end date, and have all dates between that range be highlighted as well. I was able to create an array of the dates in that range when clicked, but for some reason I can't add a class to it to change the CSS.

How could I take that array of dates and then add a CSS class to them all to change the background/highlight?

Any help would be greatly appreciated!

Thanks

回答1:

Ok so assuming you already have the user selected dates in an array. You can use the 'beforeShowDay' option to specify a function that will iterate through each day in the currently visible month, your function can then compare each date against you array and apply a css class where there is a match.

So for example init the datepicker like so...

jQuery(".cal").datepicker({
    beforeShowDay: checkDates
})

and the function checkDates() would look something like this (assuming your array is called dateArray....

function checkDates(theDate){
    for(i=0;i<dateArray.length;i++){
        if(dateArray[i].valueOf()===thedate.valueOf()){
            return [false,"cssClass","title"];
        }else return [true,""]
    }
})

This will apply the class 'cssClass' to the date if the date is contained within the dateArray

The true/false bit in the return statement determines if the date is selectable, and the bit marked 'title' is the html title attribute (tooltip)

Nb. This compares the dates to the nearest millisecond so you might want to modify it to just match days

回答2:

I have done this successfully with a datepicker for a from date and a datepicker for a to date, so I modified it for one datepicker. Here is the code:

 $(function () {
                var today = new Date();
                var thisYear = (today).getFullYear();
                var fromDate = '1/1/2000'   //this is the initial from date to set the datepicker range
                var toDate = '1/7/2000' // this is the initial to date to set the datepicker range

//... initialize datepicker....
      },
      beforeShowDay: function(date){
            //if the date is in range
            if (date >= fromDate && date <= toDate) { 
               return [true, 'ui-individual-date', '']; //applies a css class to the range
             }
             else {
                return [true, '', ''];
              }
        },
       onSelect: function (dateText, obj) {

    //sets the new range to be loaded on refresh call, assumes last click is the toDate              
         fromDate = toDate; 
         toDate = new Date(dateText); 

        $(".classDp1").datepicker("refresh"); 
        $(".classDp2").datepicker("refresh"); 
      },

Every time you refresh the beforeShowDay function is called with the new fromDate and toDate range. Having the variables outside the function and modifying them within enables the highlighting from the css to be applied on each click.

来源：https://stackoverflow.com/questions/11918071/select-a-range-of-dates-and-highlight-in-jquery-datepicker

标签

jquery

jquery-ui

datepicker

range

highlight