jquery - 更多 datePicker 上的 jQuery 日期范围

Question

我尝试编写一个 jQuery 函数，该函数接受元素内部的输入并设置正确的最小/最大日期。但是，如果我在一页上有更多的 dateRinge，则将采用另一页的设置。每个 dateRange 都应该有自己的范围。

这是一个演示： http: //jsbin.com/ahozug/1/edit，这是我的代码：

HTML

     <div class="dateRange">
        <label>Label1</label>
        <input type="text" class="from" />
        <input type="text" class="to" />
    </div>
    <div class="dateRange">
        <label>Label2</label>
        <input type="text" class="from" />
        <input type="text" class="to" />
    </div>

JS

$.fn.dateRange = function(){
    var self = this;
    var selectedDate;
    $("input",this).prop('readonly', true);
    $('.from',this).datepicker({
        onClose:function( selectedDate ) {
            $( ".to",self ).datepicker( "option", "minDate", selectedDate );
        }
    });

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

Answer 1

$( ".to",self ) 和 $( ".from",self ) 实际上匹配“to”和“from”，因为在您的情况下“self”是“window”。因此，设置适用于两个日期选择器。

您可以尝试使用：

$(this).siblings(".from") instead of $(".from",self)

和

$(this).siblings(".to") instead of $(".to",self)