How to close jquery datepicker

Question

I have a datepicker similar to this one datepicker. In this case, The datepicker is tied to a div and not to an input but the date outout is displayed in the input field. But the datepicker does not close when date is selected. I tried to showbuttonpanel but upon clicking the button it does not close as well. Hidind is not option here because when I tried and open again, it does not open any more. Problem is how to close the datepicke especially after selecting a date?

<p>
    Dates:
    <label><b>To:</b></label>
    <input type="text" id="input1" size="10">
    <label><b>From:</b></label>
    <input type="text" id="input2" size="10">
</p>
<div class="datepicker"></div>

Answer 1

You can use $(this).datepicker("destroy") to remove the datepicker once the user has filled in both inputs.

You can only use hide if the datepicker opens on demand, not for one that's displayed permanently in a DIV.

$(".datepicker").datepicker({
  minDate: 0,
  numberOfMonths: [3, 1],
  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) {
    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
    var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
    var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);


    if (!date1 || date2) {
      $("#input1").val(dateText);
      $("#input2").val("");
      $(this).datepicker();
    } else if (selectedDate < date1) {
      $("#input2").val($("#input1").val());
      $("#input1").val(dateText);
      $(this).datepicker();
    } else {
      $("#input2").val(dateText);
      $(this).datepicker();
    }
    if ($("#input1").val() && $("#input2").val()) {
        $(this).datepicker("destroy");
    }
  }
});

fiddle