具有开始结束验证的多个 jquery Datepicker

Question

您好，如果能就我的问题提供任何帮助，我将不胜感激

如果我只有 1 个用于开始和结束的日期选择器，我可以让 jQuery Datepicker 与开始/结束日期验证一起工作。

但是，如果我在同一页面中有多个日期选择器，我不知道如何拥有相同的功能。我无法将它们归类，因为它们无法根据正确的开始和结束日期选择器进行验证。

我到处搜索，但仍然找不到解决方案。希望有人可以帮助我！ 谢谢你

这是我的javascript：

$(document).ready(function () {
    $("#start1").datepicker({
    numberOfMonths: 2,
    onSelect: function(selected) {
      $("#end1").datepicker("option","minDate", selected)
    }
});
    $("#end1").datepicker({ 
    numberOfMonths: 2,
    onSelect: function(selected) {
       $("#start1").datepicker("option","maxDate", selected)
    }
});  
});

这是我每个 1 个日期选择器的 html：

<input type="text" name="start1" placeholder="Start Date" id="start1" class="form-control" />'
<input type="text" name="end1"  placeholder="End Date" id="end1" class="form-control" />

如果日期选择器超过 1 个，则代码如下：

<input type="text" name="start" placeholder="Start Date" id="start<%=i%>" class="form-control" />
<input type="text" name="end"  placeholder="End Date" id="end<%=i%>" class="form-control" />

其中 i 代表一个取决于数组大小的数字

Answer 1

我只是使用了类开始和类结束，并使用它们调用了 datepicker 函数。对于验证和操作，我保留了 id 的原样，您可以使用它们来验证/操作字段。

更新:::

在我最初回答几个小时后，我现在正在更新我的答案，以考虑到我在我们之间通过 cmets 部分进行了几次沟通后了解 OP 想要什么。代码 sn-p 和 fiddle 链接也更新为新答案。

我介绍的主要内容是输入标签“data-grp”的新数据属性。因此，每个开始/结束日期对都成为唯一数据组的一部分。在我的代码示例中，我使用了 2 对开始/结束日期以及 data-grp="1" 和 data-grp="2" 的数据属性。现在使用它我已经调整了 datepicket 调用实例化以唯一标识正确的数据组，并将最小/最大日期功能/选项仅应用于该特定组。

希望这就是你要找的……

Jsfiddle 链接http://jsfiddle.net/2k72adyL/6/

代码sn-p如下......

$(document).ready(function() {

  $(".datePickStart").datepicker({
    minDate: 0,
    numberOfMonths: 2,
    onSelect: function(selected) {
      var datagrp = $(this).attr('data-grp');
      var end_currdatagrp = ".end[data-grp='" + datagrp + "']";
      var start_currdatagrp = ".start[data-grp='" + datagrp + "']";
      $(end_currdatagrp).datepicker("option", "minDate", selected);

    }
  });

  $(".datePickEnd").datepicker({
    minDate: 1,
    numberOfMonths: 2,
    onSelect: function(selected) {
      var datagrp = $(this).attr('data-grp');
      var start_currdatagrp = ".start[data-grp='" + datagrp + "']";
      $(start_currdatagrp).datepicker("option", "maxDate", selected);
    }
  });
});

Start1:
<input type="text" name="start1" placeholder="Start Date" id="start1" class="form-control start datePickStart" data-grp="1" />
<br>
<br>End1:
<input type="text" name="end1" placeholder="End Date" id="end1" class="form-control end datePickEnd" data-grp="1" />
<hr>
<br>Start2:
<input type="text" name="start2" placeholder="Start Date" id="start2" class="form-control start datePickStart" data-grp="2" />
<br>
<br>End2:
<input type="text" name="end2" placeholder="End Date" id="end2" class="form-control end datePickEnd" data-grp="2" />