Pure JQuery UI date range picker

Ishank Gupta

Date range selector example given in the official documentation of JQuery UI datepicker is not that handy, so I have have modified it a bit and have designed the same which is more intuitive. You can have a look at this  demo HTML of the range picker is simple, I have created two text field separated with a hyphen.

 <div align="center"> <div class="date-range"><input id="start_date" class="datepicker" name="start_date" readonly="readonly" type="text" data-should_refresh="end_date" data-type="minDate" /> <div class="saperator">-</div> <input id="end_date" class="datepicker" name="end_date" readonly="readonly" type="text" data-should_refresh="start_date" data-type="maxDate" /> </div> </div> 

Add CSS to make it look better

 .datepicker { width: 80px; border: 0; }...
Read more