how to create start and end Date Datepicker in jquery?

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span.

You can use keyboard shortcuts to drive the datepicker:

This date picker for date range(start and end date) and start from today date. 

Add Following script and css in head section:

<link href="css/style.css" media="all" rel="stylesheet" type="text/css" />

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>  

 <script>

 var date = new Date();

 var currentMonth = date.getMonth();

 var currentDate = date.getDate();

 var currentYear = date.getFullYear();

$(function() {

var dates = $( "#from, #to" ).datepicker({

defaultDate: "+1w",

changeMonth: true,

numberOfMonths: 1,

minDate: new Date(currentYear, currentMonth, currentDate),

onSelect: function( selectedDate ) {

var option = this.id == "from" ? "minDate" : "maxDate",

instance = $( this ).data( "datepicker" ),

date = $.datepicker.parseDate(

instance.settings.dateFormat ||

$.datepicker._defaults.dateFormat,

selectedDate, instance.settings );

dates.not( this ).datepicker( "option", option, date );

}

});

});

</script>

Add following HTML in body section:

<div>

    <label for="check_in">Check-in</label>

    <input class="booking-field" id="from" name="check_in" type="text" />

   

</div>

    <div>

    <label for="check_out">Check-out</label>

    <input class="booking-field" id="to" name="check_out" type="text" />

 

</div>