JQuery UI Date Range Selection with one input field

Add following code in your html section.

[code language=”html”]
<input id="date" />

add following jquery code in your file

[code language=”js”]
    numberOfMonths: 2,
    onSelect: function( selectedDate ) {
            $(this).data().datepicker.inline = true
            $(this).data().datepicker.first = selectedDate;
            if(selectedDate > $(this).data().datepicker.first){
                $(this).val($(this).data().datepicker.first+" – "+selectedDate);
                $(this).val(selectedDate+" – "+$(this).data().datepicker.first);
            $(this).data().datepicker.inline = false;
        delete $(this).data().datepicker.first;
        $(this).data().datepicker.inline = false;


Sandeep Kumar

Sandeep kumar is a web developer and a professinal blogger. He works for latest technologies and write articles what he learn. In ICodeHub he share web languages tutorials and other programming tips and tricks. if you need some help or have some suggestion then mail him at sandeep92pal@gmail.com without any hesitation. He believes in learning and sharing.