SO - 16974543

by Arun P Johny

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css">
<div id="datepicker"></div>
<p>
  Dates:
  <input type="text" id="input1" size="10">
  <input type="text" id="input2" size="10">
</p>

CSS

.dp-highlight .ui-state-default {
  background: #484;
  color: #FFF;
}

JavaScript

/*
 * jQuery UI Datepicker: Using Datepicker to Select Date Range
 * http://salman-w.blogspot.com/2013/01/jquery-ui-datepicker-examples.html
 */
$(function() {
    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        beforeShowDay: function(date) {
            var date1 = $.datepicker.parseDate($(this).datepicker("option", "dateFormat"), $("#input1").val());
            var date2 = $.datepicker.parseDate($(this).datepicker("option", "dateFormat"), $("#input2").val());
            return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
        },
        onSelect: function(dateText, inst) {
            var date1 = $.datepicker.parseDate($(this).datepicker("option", "dateFormat"), $("#input1").val());
            var date2 = $.datepicker.parseDate($(this).datepicker("option", "dateFormat"), $("#input2").val());
            if (!date1 || date2) {
                $("#input1").val(dateText);
                $("#input2").val("");
                $(this).datepicker("option", "minDate", dateText);
            } else {
                $("#input2").val(dateText);
                $(this).datepicker("option", "minDate", null);
            }
        }
    });
});