Как создать собственный календарный календарь jquery ...............?

Question

У меня есть текстовое поле на моей веб-странице, которое показывает дату. которые также состоят из значка календаря рядом с полем. Теперь, когда я нажимаю значок, календарь должен появляться под текстовым полем. Затем, когда я нажимаю на одну дату, он должен выбрать дату, когда я выбираю вторую дату, она должна выбирать диапазон и вводить диапазон в текстовое поле. Когда я дважды нажимаю любую дату, тогда выбирается только эта дата. выбирается диапазон, тогда диапазон в календаре должен быть отмечен красной линией, начиная с 1-й даты и заканчивающейся на 2-й день. Как я могу это сделать?

Это мое текстовое поле:

Date: <input type="text" id="datepickerr" value="2016-08-26"></p> 
<img src="CalendarIcon.png" id="cal"> 

Answer 1

попробовать это

daterangepicker

его очень проста в использовании

<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" /> 

<script type="text/javascript"> 
$(function() { 
    $('input[name="daterange"]').daterangepicker(); 
}); 
</script>