thanks hans for your prompt reply. In any chance how can copy that .js file because some time i am working offline (if we have a .js file its a safer for future other wise in future link is any updation sort ofthing)

in addition to Sudarshan's hint about the missing "<link rel="stylesheet" href="../demos.css">" you should have a look whether you could download all the necessary files, needed for the datepicker. Here ist the original source code, maybe you could work first/again with it:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery UI Datepicker - Select a Date Range</title>

<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">

<script src="../../jquery-1.7.2.js"></script>

<script src="../../ui/jquery.ui.core.js"></script>

<script src="../../ui/jquery.ui.widget.js"></script>

<script src="../../ui/jquery.ui.datepicker.js"></script>

<link rel="stylesheet" href="../demos.css">

<script>

$(function() {

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

defaultDate: "+1w",

changeMonth: true,

numberOfMonths: 3,

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>

</head>

<body>

<div class="demo">

<label for="from">From</label>

<input type="text" id="from" name="from"/>

<label for="to">to</label>

<input type="text" id="to" name="to"/>

</div><!-- End demo -->

<div class="demo-description">

<p>Select the date range to search for.</p>

</div><!-- End demo-description -->

</body>

</html>

Here my DW with your source code:

and here with the original source code:

As you can see that in your code are only three advices, the original code "wants" six.