Question

我有重复的html单位如下，

html单位：

<div class="unit">      
    <div class="half">
        <label class="label-1">From : </label>
        <div class="input-container" >
            <input class="period-start" name="period[start][]" value="" type="text" >
        </div>
    </div>
    <div class="half">
        <label class="label-1">Till : </label>
        <div class="input-container" >
            <input class="period-end" name="period[end][]" value="" type="text" >
        </div>
    </div>
</div>

我使用datepicker和period-start类初始化period-end。但是这个部队正在作为单位工作。因此，我使用minDate和maxDate来控制范围。但是，当我使用以下代码时，它将影响所有单位。

jquery代码：

    $( ".period-start" ).datepicker({
        minDate: 0,
        changeMonth: true,
        numberOfMonths: 2,
        dateFormat: 'yy-mm-dd',
        onClose: function( selectedDate ) {
            $( ".period-end" ).datepicker( "option", "minDate", selectedDate );
        }
    });

    $( ".period-end" ).datepicker({
        minDate: 0,
        changeMonth: true,
        numberOfMonths: 2,
        dateFormat: 'yy-mm-dd',
        onClose: function( selectedDate ) {
            $( ".period-start" ).datepicker( "option", "maxDate", selectedDate );
        }
    });

我需要的是，日期选择只会影响同一单位内的兄弟datepicker。

任何帮助都会很感激。提前致谢

Answer 1

那是因为在onClose回调中你选择的是.period-start，它会在页面上选择该类的所有元素。你想要做的只是搜索同一单位内的那个。像这样：

// onClose callback for period start
onClose: function(selectedDate) {
  $(this)
    .closest('.unit')
    .find('.period-end')
    .datepicker( "option", "minDate", selectedDate );
}

// onClose callback for period end
onClose: function(selectedDate) {
  $(this)
    .closest('.unit')
    .find('.period-start')
    .datepicker( "option", "maxDate", selectedDate );
}

使用closest('.unit')，您可以在dom中使用类unit向上移动到最近的元素，然后find在该元素中使用类.period-end的元素https://www.example.com/posts?format=json 1}}）。

具有类选择器的Datepicker - 范围功能仅应在单元内部工作

1 个答案: