具有最小和最大范围的多个 jquery Datepicker答案

【问题标题】：Multiple jquery Datepickers with min and max Ranges具有最小和最大范围的多个 jquery Datepicker
【发布时间】：2015-10-20 11:42:11
【问题描述】：

我正在尝试处理具有开始和结束日期范围的多个日期选择器。

HTML

<div id="date1">
     <input id="datePicker[0]_StartDate" data-index="0" class="datepickerStart" type="text" name="datePicker[0].StartDate"/>
     <input id="datePicker[0]_EndDate" data-index="0" class="datepickerEnd" type="text" name="datePicker[0].EndDate"/>
</div> 
<div id="date2">
     <input id="datePicker[1]_StartDate" data-index="1" class="datepickerStart" type="text" name="datePicker[1].StartDate"/>
     <input id="datePicker[1]_EndDate" data-index="1" class="datepickerEnd" type="text" name="datePicker[1].EndDate"/>
</div>

jQuery

$(".datepickerStart").datepicker({
    constrainInput: true,
    changeMonth: true,
    changeYear: true,
    firstDay: 1,
    numberOfMonths: 1,
    onClose: function (selectedDate, obj) {
        var index = obj.input.data("index");
        $("#datePicker[" + index + "]_EndDate").datepicker("option", "minDate", selectedDate);
    }
});
$(".datepickerEnd").datepicker({
    constrainInput: true,
    changeMonth: true,
    changeYear: true,
    firstDay: 1,
    numberOfMonths: 1,
    onClose: function (selectedDate, obj) {
        var index = obj.input.data("index");
        $("#datePicker[" + index + "]_StartDate").datepicker("option", "maxDate", selectedDate);
    }
});

我正在尝试设置“索引 0”开始日期选择器最大范围与“索引 0”结束日期选择器选定日期并且尝试设置索引 0 结束日期选择器最小范围与索引 0 开始日期选择器选定日期

“索引 1”日期选择器的过程相同。

请为此提出一些解决方案。谢谢

【问题讨论】：

你遇到了什么错误？
它没有向我的日期选择器添加最小和最大范围。它显示为简单的日期选择器。
您是否检查过index 是否正确。在设置最小/最大日期之前尝试提醒它
是的，我已经检查过它及其选择正确的索引。

标签： jquery date datepicker

【解决方案1】：

你可以试试下面的代码：

发现问题。另一个问题是您元素的 ID。它们包含方括号。所以要处理这样的id，我们需要通过\\来转义它们。

小提琴链接：http://jsfiddle.net/vijayP/pqhtt7gb/

JS 代码：

$(".datepickerStart").datepicker({
    constrainInput: true,
    changeMonth: true,
    changeYear: true,
    firstDay: 1,
    numberOfMonths: 1,
    onClose: function (selectedDate, obj) {
        var index = obj.input.data("index");
        $("#datePicker\\[" + index + "\\]_EndDate").datepicker("option", "minDate", new Date(selectedDate));
    }
});
$(".datepickerEnd").datepicker({
    constrainInput: true,
    changeMonth: true,
    changeYear: true,
    firstDay: 1,
    numberOfMonths: 1,
    onClose: function (selectedDate, obj) {
        var index = obj.input.data("index");
        $("#datePicker\\[" + index + "\\]_StartDate").datepicker("option", "maxDate", selectedDate);
    }
});

【讨论】：