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

Question

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

这里是my code

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

如您所见，当用户 select 一次约会时，两个输入都会受到影响。我想每个都定位一个，但正如我提到的，我的表单是动态的，用户可以添加 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（或在单个元素中使用特殊的类名），并使用它和日期选择器类型，然后以这种方式进行更改。请参阅上面的新代码以了解我的意思。

Answer 2

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

Answer 3

您可以使用 .nextUntil() and .prevUntil() 和一些额外的方法来 select 只有下一个或上一个输入。

$(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。

Answer 4

如果我没理解错的话，您需要 N 对日期选择器（"from" 和 "to"），您需要将它们连接在一起。本质上，您需要一种方法从特定的日期选择器出发，并仅识别与其相关联的另一个日期选择器。有多种方法可以做到这一点，但我建议将您的对包装在一个包含 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是刚刚关闭的datepicker的元素。 .closest('div') 向上遍历 DOM 树，直到找到包含 <div> 的元素，然后 .find('.from') 将找到 one 元素 class from 在其中，这是链接到特定 to 元素的一个元素。

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

How to target multiple datepicker in a form?

javascript

jquery

datepicker