Question

我有两个日期选择器，它们如下：

第一个日期选择器：txtDate

HTML：

Date :  
<input type="text" id="txtDate"/>

JQuery：

$(function() {
    $("#txtDate").datepicker({
        changeMonth : true,
        changeYear : true,
        dateFormat: "yymmdd"
    })
});

第二个日期选择器：dateAvailable

HTML：

Date Available :   
<input type="text" id="dateAvailable" />

JQuery：

var dateAvailable = new Date(document.getElementById('txtDate').value);

$(function(){
    $("#dateAvailable").datepicker({
        changeMonth : true,
        changeYear : true,
        dateFormat: "yymmdd",
        minDate: new Date(dateAvailable)
    })              
});

第二个Datepicker：dateAvailable 应不小于 第一个datepicker：txtDate 。所以我需要在txtDate中选择日期，然后将其设置为dateAvailable的minDate，

但这是代码对我不起作用..如何设置dateDvailable的minDate？

Answer 1

在这里， JSFIDDLE DEMO,

您需要动态更改其他日期选择器的值，执行您所做的只是在第一次加载页面时设置第二个日期选择器的最小值。

但是当您更改第一个日期选择器时，您没有更改第二个的最小值。为此，您需要使用onClose，并更改最小值。

$(function() {
    $("#txtDate").datepicker({
     changeMonth : true,
     changeYear : true,
     dateFormat: "yymmdd",
        onClose: function(){
            $( "#datepicker" ).datepicker('change',{ 
                minDate: new Date($("#txtDate").datepicker('getDate'))
            });
        }
    })

    $( "#datepicker" ).datepicker({ 
        yearRange: '1999:c+1' ,
        changeYear: true,
        minDate: new Date(1999, 10 - 1, 25),
        maxDate: '+30Y',
    });
});

Answer 2

您需要更新第二个日期选择器才能拥有正确的日期。

如果您在页面加载时将第一个日期选取器的值指定为第二个日期选择器的minDate，那么它将没有正确的minDate。

您可以执行以下操作来更新秒日期选择器以获得正确的minDate：

$(function() {
    $("#txtDate").datepicker({
        changeMonth : true,
        changeYear : true,
        dateFormat: "yymmdd",
        onClose: function() { 
            // Update the minDate parameter of the other datepicker
             $('#dateAvailable').datepicker('option','minDate',new Date($(this).val()));
        }
    })
});

如何设置jQuery Calendar Picker的minDate？

2 个答案: