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"表示从今天起一个月零七天。

我建议尽可能使用相对日期格式。今天，我使用了0，并且使用了"+1y"。

当选择被激活时change被激活，所以我对此进行了评论。如果需要其他内容，我建议您查看.tragger("change")。

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

希望能解决所有问题，并按照您的意愿行事。

在使用每个

1 个答案: