jquery-date-range-picker | A jQuery plugin that allows user to select a date range | Plugin library

Honestly, I don't even know why you would ever get any input at all.

First, the change event on the input does only trigger when changes are made manually, hence you having to put in a space.

Looking at the datepicker's documentation under Events, you can see that a custom event datepicker-change is emitted when the two dates are set. You have to subscribe to that rather than regular change.

But then, you should't use the daterange12container at all. This is just the wrapper, which you specified should contain the elements. It has no value attribute. So you are actually sending NULLs over the wire. Here's why I'm confused that you did get something at least.

That doesn't matter, however, since the datepicker-change event already delivers the dates that were picked (look at documentation again).

So you can make your code work by editing the JavaScript tag, replacing it with:

You can use showDateFilter method to identify the dates where you want to add custom class. Please see exaple below. Here dates that needs to be highlighted are in highlightdates array.

Please note that showDateFilter filter is executed to identify the content of each date cell in the calendar.

You could do it with just a little CSS but it does leave a gap:

Modify the versions of libraries:

• daterangepicker - 0.5.0
• momentjs - 2.3.0+

Check the dependencies in the code:

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/2213/