Question

我有这段代码

$(".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输入日期无效......我希望我能说清楚...

Answer 1

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

 $(".datepicker-to").datepicker({
        changeMonth: true,
          changeYear: true,
        maxDate: "0D",
       onSelect: function( selectedDate ) {
         //disable another one here            
    }
    });

Answer 2

像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();

FIDDLE DEMO

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

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

FIDDLE DEMO 2

<强>更新要禁用所选日期，您还必须将所选日期补偿并抵消一天：

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

FIDDLE DEMO 3

如何使用javascript在日历上禁用日期

2 个答案: