<head> <link href="../demoengine/demoengine.min.css" rel="stylesheet"> <script src="../demoengine/demoengine.min.js" defer></script>
<title>jQuery UI Datepicker: Using Datepicker to Select Date Range</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> <style> .
dp-highlight .ui-state-default {
background: #484;
color: #FFF;
}
</style> </head> <body> <div id="datepicker"></div>
<p> Dates:<input type="text" id="input1" size="10">
<input type="text" id="input2" size="10"> </p>
<scrip$(function(){
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
},
onSelect: function(dateText, inst) {
if (!date1 || date2) {
$("#input1").val(dateText);
$("#input2").val("");
$(this).datepicker("option", "minDate", dateText);
} else {
$("#input2").val(dateText);
$(this).datepicker("option", "minDate", null);
});
</script> </body>