jQuery Datepicker date range populates inline calender

Question

I am trying to get the jQuery datepicker date range fields to highlight the selected dates an inline calendar. So far I have gotten the inline calendar to get the selected dates to populate 2 different fields, date1 and date2 . I just need the selected date ranges to highlight the selected dates inside the calendar.

I have created a jsfiddle here ( Jsfiddle Demo )

I have tried the jQuery alternate field method but with no success, any help would be appreciated!

Here is a picture of what I'm trying to accomplish.

Answer 1

Updated

With your extra comments I better understand what you are trying to do.

Working JSFiddle .

Brief summary:

• onSelect() is the best way to handle a date selection, and it is passed the selected date as a string, so I removed your .on() handlers and the getDate() function.

• Save the start/end dates when they are selected;

• Refresh your inline datepicker with $('#datepicker').datepicker('refresh'); when a start/end is selected, so that your beforeShowDay() is called and can repaint the calendar using those selected dates. It will have also fired on initialisation of the inline datepicker but as no dates were selected at that stage it did nothing.

• Simplify the test you had in beforeShowDay() to add a class to days between start and end, inclusive. I understand you might want a bit more than this (eg maybe highlight the start date when it is all that is selected) but this is the simplest case that demonstrates a working example.

• Added basic styling for your .dp-highlight class, had to add more specificity to make sure it overrides the default datepicker styling.

• I also removed a few things to keep it simple:

  • extra inputs under inline datepicker, I realise you maybe need them for the next step but that's not directly related to this problem;
  • inline datepicker onSelect code, again not directly related to this problem;