两个日期选择器jQuery上的限制日期[重复]答案

【问题标题】：Restricted dates on two datepickers jQuery [duplicate]两个日期选择器jQuery上的限制日期[重复]
【发布时间】：2016-10-28 10:25:58
【问题描述】：

我有一个问题，我似乎无法找到答案，即使在谷歌上搜索了 10 个小时左右。所以，亲爱的朋友们；

我有两个可以完美搭配使用的日期选择器，但我最不需要的是最后一个日期选择器中的日期范围受限。限制日期应该是您在第一个日期选择器中选择的日期后的 14 天。我试过maxDate，但它只限制今天和未来14天的日期，但我想要的是限制它从选择的第一个日期开始，然后在该日期之后的未来14天。这是我的代码：

HTML：

<input type="text" name="when" class="input-date" id="calendarfrom"/>
<input type="text" name="when" class="input-date" id="calendarto"/>

JS：

$(document).ready(function () {
    $("#calendarfrom").datepicker({
        dateFormat: "dd/mm/yy",
        minDate: 0,
        monthNames: ["Januar", "Februar", "Mars", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Desember"],
        dayNamesMin: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
        firstDay: 1,
        onClose: function (selectedDate) {
            $("#calendarto").datepicker("option", "minDate", selectedDate);
        }
    });
    $("#calendarto").datepicker({
        dateFormat: "dd/mm/yy",
        monthNames: ["Januar", "Februar", "Mars", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Desember"],
        dayNamesMin: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
        firstDay: 1,
        onClose: function (selectedDate) {
            $("#calendarfrom").datepicker("option", "maxDate", selectedDate);
        }
    });
});

【问题讨论】：

标签： javascript jquery date datepicker

【解决方案1】：

选择日期后，您需要为所选日期添加天数，然后使用maxDate。

onClose 来自日期选择器：

JSFIDDLE：https://jsfiddle.net/tejashsoni111/a9a6jjkv/1/

$(document).ready(function () {
    $("#calendarfrom").datepicker({
        dateFormat: "dd/mm/yy",
        minDate: 0,
        monthNames: ["Januar", "Februar", "Mars", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Desember"],
        dayNamesMin: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
        firstDay: 1,
        onClose: function (date) {
            var dateParts = date.split("/");
            var dateObject = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
            var selectedDate = new Date(dateObject);
            var numberOfDaysToAdd = 14;
            var endDate = new Date(selectedDate);
            endDate.setDate(endDate.getDate() + numberOfDaysToAdd);
            $("#calendarto").datepicker("option", "minDate", selectedDate);
            $("#calendarto").datepicker("option", "maxDate", endDate);
        }
    });
    $("#calendarto").datepicker({
        dateFormat: "dd/mm/yy",
        monthNames: ["Januar", "Februar", "Mars", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Desember"],
        dayNamesMin: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
        firstDay: 1,
        onClose: function (selectedDate) {
            $("#calendarfrom").datepicker("option", "maxDate", selectedDate);
        }
    });
});

您可以在以下位置查看更多说明： Restrict date in jquery datepicker based on another datepicker or textbox

【讨论】：

这行不通。我不知道把这段代码放在哪里。您是否建议我将它放在 #calendarfrom 标签的 onClose 上？还是两者兼而有之？
是的，它用于日期选择器的日历。让我更新我的答案。
它仍然无法正常工作。它只显示从今天开始的 14 天，但我需要的是从第一个输入中选择的日期开始的 14 天。因此，如果我选择 11 月 1 日，它应该显示到 11 月 15 日的范围，但现在它只显示 11 月 10 日（即从今天起 14 天）
@TaniaHol，我已经更新了我的答案，并为此添加了 Fiddle。问题是日期格式。它现在应该可以工作了。