没有内联日期选择器的日期范围答案

【问题标题】：Date range without an inline datepicker没有内联日期选择器的日期范围
【发布时间】：2016-05-09 10:45:29
【问题描述】：

我正在尝试在这个线程中做类似的事情： Date range picker on jquery ui datepicker

但我不希望日期选择器是内联的，并且此代码仅适用于内联日期选择器。

选择#date1 或#date2 输入时我只需要日期选择器。

我必须很容易，但我被困在这里，我在谷歌上找到的唯一解决方案是插件或内联日期选择器。

【问题讨论】：

标签： jquery jquery-ui-datepicker

【解决方案1】：

jQuery UI 的 DatePicker 默认是下拉菜单，所以我认为您找到的示例有点过时了。

https://jsfiddle.net/gRoberts/z4j227h6/

$( "#from" ).datepicker({
  defaultDate: "+1w",
  changeMonth: true,
  numberOfMonths: 3,
  onClose: function( selectedDate ) {
    $( "#to" ).datepicker( "option", "minDate", selectedDate );
  }
});
$( "#to" ).datepicker({
  defaultDate: "+1w",
  changeMonth: true,
  numberOfMonths: 3,
  onClose: function( selectedDate ) {
    $( "#from" ).datepicker( "option", "maxDate", selectedDate );
  },
  beforeShowDay: function (date) {
    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#from").val());
    var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#to").val());
    return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
  },
});

上面的代码/小提琴表明，通过一些小的更改，您可以在下拉列表中复制该功能。

HTH。

【讨论】：

谢谢，没关系，但是当您选择其中一个日期时，这个会关闭日期选择器。在您选择两个日期之前，我需要打开日期选择器。
这是一个有点老套的方法 - jsfiddle.net/gRoberts/z4j227h6/1 - 基本上你必须保持它内联但显示/隐藏它。一旦在第一个输入上选择了日期，您可能需要更改它以将焦点转移到第二个输入。
此时我这样做了：让日期选择器保持内联，css -> .datepicker { position: absolute; display: none} 和 javascript: $("#date1, #date2").focus(function(){ $(".datepicker").show(); });最后，当两个日期输入都包含某个日期时，y 使用了 .hide() 方法。我不喜欢这个解决方案，但它似乎有效。