在使用每个日期选择器范围中选择 FROM 日期后，打开 TO 日期

Question

我在页面上有一个日历范围，包括两个输入，#from-date 和 #to-date。如果我从日期中选择，我希望自动显示到日期。

HTML 标记：

<div class="calendar-range">
    <div class="filter-first date-from">
        <input type="text" id="from-date" class="form-control form-control-main calendar-from datepicker">
        <i class="fa fa-calendar"></i>
    </div>
    <div class="filter date-to">
        <input type="text" id="to-date" class="form-control form-control-main calendar-to datepicker">
        <i class="fa fa-calendar"></i>
    </div>
</div>

这是 jQuery 代码：

body.find(".calendar-range").each(function (index, callback) {
    var selectedToElement = $(this).find('.calendar-to');
    var selectedToDay = selectedToElement.datepicker('getDate');
    var selectedFromElement = $(this).find('.calendar-from');
    var selectedFromDay = selectedFromElement.datepicker('getDate');
    var numberOfMonths = 2;

    if (body.width() < 768) {
        numberOfMonths = 1;
    }

    var settings = {
        changeMonth: false,
        numberOfMonths: numberOfMonths,
        dateFormat: dateFormat,
        minDate: new Date(Date.now()),
        maxDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
        onSelect: function (dateText, object) {
            selectedToDay = selectedToElement.datepicker('getDate');
            selectedFromDay = selectedFromElement.datepicker('getDate');

            selectedToElement.change();
            selectedFromElement.change();

            if ($(this).hasClass('calendar-from')) {
                to.datepicker("option", "minDate", getDate(this.value));
            } else if ($(this).hasClass('calendar-to')) {
                from.datepicker("option", "maxDate", getDate(this.value));
            }
        },
        beforeShow: function (input, inst) {
            selectedToDay = selectedToElement.datepicker('getDate');
            selectedFromDay = selectedFromElement.datepicker('getDate');
        },
        beforeShowDay: function (date) {
            var d = date.getTime();
            var cssClass = 'selected-date-range';
            var defaultClass = '';

            if (selectedToDay != null && d == selectedToDay.getTime()) {
                cssClass = cssClass + ' selected-date-range-last';
                defaultClass = defaultClass + ' selected-date-range-last';
            } else if (selectedFromDay != null && d == selectedFromDay.getTime()) {
                cssClass = cssClass + ' selected-date-range-first';
                defaultClass = defaultClass + ' selected-date-range-first';
            }

            if (selectedFromDay != null && selectedToDay != null && d <= selectedToDay.getTime() && d >= selectedFromDay.getTime()) {
                return [true, cssClass, ''];
            }
            return [true, defaultClass, ''];
        },
        onClose: function (input, object) {
            if (object.id === "from-date") {
                to.datepicker("show");
            }
        }
    };

    var from = selectedFromElement.datepicker(settings);
    var to = selectedToElement.datepicker(settings);
});

我尝试使用 onClose 解决它，但这似乎重复了两次，并且也关闭了打开的#to-date。是否可以在不分离两个日期选择器的情况下实现它？ （隐藏/显示日期选择器也会发生一些非常奇怪的事情）

感谢您的帮助，谢谢。

Answer 1

您可以进行许多改进。这是一个工作示例：

https://jsfiddle.net/Twisty/mcqra47o/

JavaScript

$(function() {
  var body = $("body");
  var dateFormat = "mm/dd/yy";
  $(".calendar-range").each(function(index, callback) {
    var selectedToElement = $(this).find('.calendar-to');
    var selectedToDay = selectedToElement.val().length ? selectedToElement.datepicker('getDate') : new Date;
    var selectedFromElement = $(this).find('.calendar-from');
    var selectedFromDay = selectedFromElement.val().length ? selectedFromElement.datepicker('getDate') : new Date;
    var numberOfMonths = 2;

    if (body.width() < 768) {
      numberOfMonths = 1;
    }

    var settings = {
      changeMonth: false,
      numberOfMonths: numberOfMonths,
      dateFormat: dateFormat,
      minDate: 0,
      maxDate: "+1y",
      onSelect: function(dateText, object) {
        selectedToDay = selectedToElement.datepicker('getDate');
        selectedFromDay = selectedFromElement.datepicker('getDate');
        /*
        selectedToElement.change();
        selectedFromElement.change();
        */
        if ($(this).hasClass('calendar-from')) {
          selectedToElement.datepicker("option", "minDate", dateText);
        } else if ($(this).hasClass('calendar-to')) {
          selectedFromElement.datepicker("option", "maxDate", dateText);
        }
      },
      beforeShow: function(input, inst) {
        selectedToDay = selectedToElement.datepicker('getDate');
        selectedFromDay = selectedFromElement.datepicker('getDate');
      },
      beforeShowDay: function(date) {
        var d = date.getTime();
        var cssClass = 'selected-date-range';
        var defaultClass = '';
        if (selectedToDay != null && d == selectedToDay.getTime()) {
          cssClass = cssClass + ' selected-date-range-last';
          defaultClass = defaultClass + ' selected-date-range-last';
        } else if (selectedFromDay != null && d == selectedFromDay.getTime()) {
          cssClass = cssClass + ' selected-date-range-first';
          defaultClass = defaultClass + ' selected-date-range-first';
        }

        if (selectedFromDay != null && selectedToDay != null && d <= selectedToDay.getTime() && d >= selectedFromDay.getTime()) {
          return [true, cssClass, ''];
        }
        return [true, defaultClass, ''];
      },
      /*
      onClose: function(input, object) {
        if (object.id === "from-date") {
          to.datepicker("show");
        }
      }
      */
    };

    var from = selectedFromElement.datepicker(settings);
    var to = selectedToElement.datepicker(settings);
  });
});

首先，我们不应该在.datepicker() 被初始化之前调用getDate。所以要尽早设置以下变量，我们可以这样做：

var selectedToDay = selectedToElement.val().length ? selectedToElement.datepicker('getDate') : new Date;
var selectedFromDay = selectedFromElement.val().length ? selectedFromElement.datepicker('getDate') : new Date;

对于minDate和maxDate，我们可以查看API看看：

支持多种类型：

• 日期：包含最短日期的日期对象。

• 数字：从今天开始的天数。例如2 代表从今天起两天，-1 代表昨天。

• 字符串： 格式由dateFormat 选项或相对日期定义的字符串。相对日期必须包含值和周期对；有效期间是 "y" 表示年，"m" 表示月，"w" 表示周，"d" 表示天。例如，"+1m +7d" 表示从今天起 1 个月零 7 天。

如果可能，我建议使用相对日期格式。今天用0，1年用"+1y"。

当做出选择时，change 无论如何都会被触发，所以我将其注释掉。如果有其他需要，我建议查看.tragger("change")。

onSelect 选项传入dateText，因此我们可以根据需要使用它来设置新的minDate 和maxDate。

希望它能解决所有问题并按您的意愿工作。