如何关闭 jquery 日期选择器

Question

我有一个类似于这个的日期选择器datepicker。在这种情况下，日期选择器绑定到 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

我已经在 CodePen 上创建了一个演示。也许这对你有帮助。

<form action="https://httpbin.org/post" method="post">
  <input type="text" name="date" class="js-ui-datepicker">
</form>


$('.js-ui-datepicker').one('focus', function() {
  $(this)
    .datepicker({
      minDate: 0,
      showButtonPanel: true,
    })
    .datepicker('show');
  $('#ui-datepicker-div').draggable();
});

Answer 2

一旦用户填写了两个输入，您就可以使用 $(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

如何关闭 jquery 日期选择器

How to close jquery datepicker

html

css

jquery

jquery-ui-datepicker