<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <script> $(function() { $( "#from" ).datepicker({ defaultDate: "+1d", changeMonth: true, changeYear: true, numberOfMonths: 1, onSelect: function( selectedDate ) { $( "#to" ).datepicker( "option", "minDate", selectedDate ); } }); //*** var currentDate = new Date(); $("#from").datepicker("setDate",currentDate); $("#from").datepicker("option",{ dateFormat: 'mm/dd/yy', showOn: "button", }); $( "#to" ).datepicker({ defaultDate: "+1d", changeMonth: true, changeYear: true, numberOfMonths: 1, onSelect: function( selectedDate ) { $( "#from" ).datepicker( "option", "maxDate", selectedDate ); } }); //*** var currentDate = new Date(); $("#to").datepicker("setDate",currentDate); $("#to").datepicker("option",{ dateFormat: 'mm/dd/yy', showOn: "button", // whatever option Or event you want }); }); </script>
<div> <label for="from">From</label> <input type="text" id="from" name="from"> <label for="to">to</label> <input type="text" id="to" name="to"> <input type="submit" name="go" value="Go"> </div>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">