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

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中的日期时，我想禁用“到”txtbox中的日期。 需要处理的日期是我在“从”txtbox中输入的日期之前的日期，因为显然从jan21-jan9输入日期无效...我希望我能说清楚...

Answer 1

在datepicker select callback中，您可以将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设置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