Question

我有一个带有4个datepicker输入的动态表单。如何设置这些日期选择器输入以避免在设置第一个日期后过去的日期？

这是 my code

$(function() {
    $( ".from" ).datepicker({
      onClose: function( selectedDate ) {
        $( ".to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( ".to" ).datepicker({
      onClose: function( selectedDate ) {
        $( ".from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });

正如您所看到的，当用户选择一个日期时，两个输入都会受到影响。我想针对每个人，但正如我所提到的，我的表格是动态的，用户可以添加4 .. 6 .. 8个日期选择器输入。

Answer 1

根据我对您的问题的理解，您的代码很接近，但您需要更改添加选项的方式。他们应该使用角度（{）括号。

尝试以下方法：

$(function () {
    $(".from").datepicker({
        onClose: function (selectedDate) {
            $("." + this.parentElement.className + " .to").datepicker("option", {
                "minDate": selectedDate
            });
        }
    });
    $(".to").datepicker({
        onClose: function (selectedDate) {
            $("." + this.parentElement.className + " .from").datepicker("option", {
                "maxDate": selectedDate
            });
        }
    });
});

JSFiddle

修改

另一种方法是放置div（或在各个元素中使用特殊的类名），并将其与datepicker类型一起使用，并以这种方式进行更改。请参阅上面的新代码，了解我的意思。

Answer 2

如果我理解了这一点，你需要N对的日期选择器（“从”和“到”），你需要将它们绑在一起。从本质上讲，您需要一种方法来从特定的日期选择器开始，并仅识别与其绑定的另一个日期选择器。您可以通过多种方式执行此操作，但我建议将您的对包装在包含HTML元素（<div>）中，然后执行相对于此的选择器。像这样：

<div>
    <label class="required">Work from</label>
    <input type="text" class="form-control date-picker from input-append minDate" placeholder="mm/yyyy"/><br/>
    <label>Work until </label>
    <input type="text" class="form-control date-picker to input-append maxDate" placeholder="mm/yyyy"/>
</div>

<div>
    <label class="required">Study from</label>
    <input type="text" class="form-control date-picker from input-append minDate" placeholder="mm/yyyy"/><br/>
    <label>Study until </label>
    <input type="text" class="form-control date-picker to input-append maxDate" placeholder="mm/yyyy" />
</div>

然后你要修改日期选择器的jQuery代码，如下所示：

$(function() {
    $( ".from" ).datepicker({
        onClose: function( selectedDate ) {
            $(this).closest('div').find('.to').datepicker( "option", "minDate", selectedDate );
        }
    });
    $( ".to" ).datepicker({
        onClose: function( selectedDate ) {
            $(this).closest('div').find('.from').datepicker( "option", "maxDate", selectedDate );
        }
    });
});

关键变化是：

$(this).closest('div').find('.from')

在函数中，this是刚刚关闭的日期选择器的元素。 .closest('div')遍历DOM树，直到找到包含<div>元素，然后.find('.from')将找到其中包含类from的一个元素，这是与特定to元素相关联的一个元素。

Answer 3

$(datepicker1,datepicker2,datepicker3,...).datepicker({
    minDate:selectedDate1,
    maxDate:selectedDate2
})

Answer 4

您可以使用.nextUntil()和.prevUntil()以及其他一些方法来仅选择下一个或上一个输入。

$(function() {
  $( ".from" ).datepicker({
    onClose: function( selectedDate ) {
      $(this).nextUntil('.to').andSelf().last().next().datepicker( "option", "minDate", selectedDate );
    }
  });
  $( ".to" ).datepicker({
    onClose: function( selectedDate ) {
      $(this).prevUntil('.from').prev().datepicker( "option", "maxDate", selectedDate );
    }
  });
});

JSFiddle

受the answer to a related question启发的答案。

如何在表单中定位多个日期选择器？

4 个答案: