0

我有这个代码

$(".datepicker").datepicker();
$(".datepicker-to").datepicker({
    changeMonth: true,
    changeYear: true,
    maxDate: "0D"
});

然后我的文本框是：

<div>
    <span>Date From :</span>
    <input type="text" class="datepicker-to" id="dateFrom" name="dateFrom" />
</div>
<div>
    <span>Date To :</span>
    <input type="text" class="datepicker-to" id="dateTo" name="dateTo" />
</div>

现在，当我单击“来自”txtbox 中的日期时，我想禁用“to”txtbox 中的日期。需要禁用的日期是我在“来自”txtbox 中输入的日期之前的日期，因为显然从 jan21-jan9 输入日期是无效的......我希望我自己清楚......

4

2 回答 2

1

在datepicker选择回调中，您可以放置textbox​​属性readonly。因此它进入非活动模式。

 $(".datepicker-to").datepicker({
        changeMonth: true,
          changeYear: true,
        maxDate: "0D",
       onSelect: function( selectedDate ) {
         //disable another one here            
    }
    });
于 2013-06-18T18:27:04.930 回答
1

就像 Baadsha 写的那样，onSelect用来找出日期是什么时候被选中的。但是我建议您然后设置minDate（使用after initilization方法）和refresh小部件。

$("#dateFrom").datepicker({
    "onSelect": function () {
        var input = $(this);
        $("#dateTo").datepicker("option", "minDate", input.datepicker("getDate"));
        $("#dateTo").datepicker("refresh");
    }
});
$("#dateTo").datepicker();

小提琴演示

要让日期选择器在两个方向上更新，maxDate也要设置：

$("#dateTo").datepicker({
    "onSelect": function () {
        var input = $(this);
        $("#dateFrom").datepicker("option", "maxDate", input.datepicker("getDate"));
        $("#dateFrom").datepicker("refresh");
    }
});

小提琴演示 2

更新： 要禁用所选日期，您必须将所选日期补偿并偏移一天：

var dayAfter = input.datepicker("getDate");
dayAfter.setDate(dayAfter.getDate() + 1);
$("#dateTo").datepicker("option", "minDate", dayAfter);

小提琴演示 3

于 2013-06-18T19:22:24.163 回答