jquery - 如何关闭 jquery 日期选择器

Question

我有一个类似于这个的日期选择器 datepicker .在这种情况下，日期选择器绑定(bind)到 div 而不是输入，但日期输出显示在输入字段中。但是当选择日期时，日期选择器不会关闭。我试图显示按钮面板，但单击按钮后它也没有关闭。 Hidind 在这里不是选项，因为当我尝试再次打开时，它不再打开。问题是如何关闭日期选择器，尤其是在选择日期之后？

<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

一旦用户填写了两个输入，您可以使用 $(this).datepicker("destroy") 删除日期选择器。

如果日期选择器按需打开，您只能使用hide，而不是用于永久显示在 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