2个jQuery datepickers 1个输入字段

Question

我想从1个输入字段中显示2个日期选择器日历（无限制），我该如何实现？

Postal Code   Region
2000
2001
3001
4001
4999
9013

请参阅小提琴http://jsfiddle.net/v2m4pn0h/以获取所需的草稿-但仅显示1个日历，并且代码也不稳定（尝试单击输入字段并多次单击文档，然后查看会发生什么）。

这是我要实现的目标：

Answer 1

我建议使用两个不可见的输入和一个显示容器来显示所选的日期范围。这两个隐藏的元素放置在显示容器的后面，以确保日期选择器日历显示在正确的位置。

$(function() {
   var date1 = $('#date1');
   var date2 = $('#date2');
   var completeDate = $('#complete_date');

   date1.datepicker({
     defaultDate: "+1w",
     changeMonth: true,
     numberOfMonths: 1,
     onClose: function(selectedDate) {
       var date = $(this).datepicker("getDate");
       var formattedDate = $.datepicker.formatDate('mm/dd/yy', date);
       completeDate.val(formattedDate);
       date2.datepicker("setDate", date);
       date2.datepicker("show");


     }
   });
   date2.datepicker({
     defaultDate: "+1w",
     changeMonth: true,
     numberOfMonths: 1,
     onClose: function(selectedDate) {
       var date = $(this).datepicker("getDate");
       var formattedDate = $.datepicker.formatDate('mm/dd/yy', date);
       completeDate.val(completeDate.val() + ' - ' + formattedDate);
     }
   });

   $('#complete_date').on('click', function() {
     date1.datepicker("show");
   })
 });

body {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
}
.date_wrapper {
  position: relative;  
}

.display_element {
  min-width: 150px;
}

.invisible {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">

<div class="date_wrapper">
  <input type="text" class="display_element" id="complete_date" value="" placeholder="(Choose date range)" />
  <input id="date1" class="invisible" value="" />
  <input id="date2" class="invisible" value="" />
</div>