JQuery: Datepicker Highlighting a date Range

Question

I'm programming a Struts web application using JQuery 1.7 Datepicker on one of my jsps in order to implement a calendar that can highlight reminders for a user.

I have a question:

I'd like to highlight a range of dates in the datepicker. With my code, the Javascript console shows no errors but the range of dates is not highlighted when I log in. this is my function:

$(function(){

            $('#datepicker').datepicker({
                flat: true,
                numberOfMonths: [1,1],
                dateFormat: 'dd/mm/yy',
                beforeShowDay: highlightDays
            });

I have an array of reminders, each reminder has 3 attributes, startDate, endDate and unit (associated unit)

On the beforeShowDay event, the function highlightDays is activated:

function highlightDays(date) {

     //For all reminders in the db
   for (var i = 0; i < reminders.length; i++) { 

    //If the current date in between the start and end date of reminder
      if( (new Date(reminders[i].start).getTime())  
                       <= date.getTime()                            
                      &&  (date.getTime())                           
                       <= (new Date(reminders[i].end).getTime()))  date
                { 
                  //Then highlight the current date             
                   return [true, 'ui-state-highlight',reminders[i].unit];

                }else{   //Otherwise do not highlight                          
                   return [true, ''];  
                }
           }          
      }

Do you have any idea what I could be doing wrong? What I've implemented so far makes sense to me so I'm not sure what could be going wrong. I would really appreciate some guidance!

Thanks a lot for reading!

Are you having a problem selecting a range or using the value? — Antarr Byrd
Oh thanks for commenting! Well my problem is even though I have a range (start and end date on reminders), and I'm trying to highlight the days inbetween on the calendar, it will only highlight the present day, and not the date ranges i've asked it to highlight in the highlightDays function — AndresR
hiya, are you looking for something like this: jsbin.com/evudo , cheers — Tats_innit

Rainhider Rainhider · Accepted Answer · 2015-03-17T14:59:40

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.

JQuery: Datepicker Highlighting a date Range

1 Answers