jquery-ui - 基于另一个日期选择器或文本框限制 jquery 日期选择器中的日期

Question

我有两个文本框，其中连接了一个日期选择器。文本框用于指定开始日期和结束日期。第一个日期选择器的设置使用户无法选择今天之前的日期，但可以选择 future 的任何日期。

如何设置第二个日期选择器，使其无法选择第一个日期选择器中选择的日期之前的日期？例如:如果今天是 10 年 12 月 11 日，我在第一个日期选择器中选择 10 年 12 月 15 日，那么第二个日期选择器应该无法选择 10 年 12 月 15 日之前的任何内容。

这是我到目前为止所拥有的:

$("#txtStartDate").datepicker({ minDate: 0 });
$("#txtEndDate").datepicker({});

Answer 1

例如，在此示例代码中，startDatePicker 选择为 2010-12-12，startDatePicker 的更改事件设置 endDatePicker 的 minDate 2010-12-13。它会在此日期之前锁定单元格。这是 @Victor 提到的示例..我希望它有所帮助...问候...Ozlem。

$("#startDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    minDate: new Date(),
    maxDate: '+2y',
    onSelect: function(date){

        var selectedDate = new Date(date);
        var msecsInADay = 86400000;
        var endDate = new Date(selectedDate.getTime() + msecsInADay);

       //Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker
        $("#endDatePicker").datepicker( "option", "minDate", endDate );
        $("#endDatePicker").datepicker( "option", "maxDate", '+2y' );

    }
});

$("#endDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd',
    changeMonth: true
});