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)

更多datePicker上的jQuery日期范围

1 个答案: