在 jquery datepicker 中设置 minDate 没有任何反应？答案

【问题标题】：Nothing happen on setting minDate in jquery datepicker?在 jquery datepicker 中设置 minDate 没有任何反应？
【发布时间】：2010-05-20 15:42:36
【问题描述】：

我是这样写的..

<script>


$(function() {
                   $('#from').datepicker({
                            defaultDate: "+5d",
                            changeMonth: true,
                            numberOfMonths:1 ,
                            minDate:"+0d",
                            dateFormat: 'DD, MM d, yy',
                            onSelect: function(selectedDate) {
                                    var option = this.id == "from" ? "minDate" : "maxDate";

                                   var instance = $(this).data("datepicker");

                                    var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);


                                    dates.not(this).datepicker("option", option, date);

                            }
                    });

});

$(function() {
    $('#to').datepicker({
                            defaultDate: "+5d",
                            changeMonth: true,
                            numberOfMonths:1 ,
                            minDate:"+0d",
                            dateFormat: 'DD, MM d, yy',
                            onSelect: function(selectedDate) {
                                    var option = this.id == "from" ? "minDate" : "maxDate";

                                   var instance = $(this).data("datepicker");

                                    var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);


                                    dates.not(this).datepicker("option", option, date);

                            }
                    });
});

function callme(id){
    var temp1 = "#" + id;
    if(temp1 == "#from"){
        $("#to").unbind();
    }
    else{
        var temp = $("#from").val();
        var msecsInADay = 86400000;
        var startDate = new Date(temp);
        var endDate = new Date(startDate.getTime() + msecsInADay);
        var t = endDate.getDate() + '/' + (endDate.getMonth()+1) + '/' + endDate.getFullYear();

        $('#to').datepicker({minDate: new Date(t)});
        $('#to').datepicker().datepicker("show");
    }
}
</script>


</head>

<body>
     <label>date</label><input  id="from" type="text" onclick="callme(this.id)"/>
    <label>return</label><input id="to" type="text" onclick="callme(this.id)" />

现在我想要的是....
当我选择第一个日期时。 [表示“#from”] 应该在日历中禁用今天之前的日期。
现在，当我在日历日期中选择第二个日期 [表示“#to”] 时，应该从一天开始。然后是上一个日期。

但是这里的最小日期没有改变。

提前谢谢...

【问题讨论】：

标签： jquery datetime jquery-ui jquery-plugins

【解决方案1】：

如果我理解你的问题（和代码，因为提供的代码比你的规范做的更多）你想要以下行为：

当Date，F，在#from被选中时，您只能在#to中选择大于F的日期。
当日期时，T，在#to @ @ @ @ @时，没有大于或等于T应该在#from

此代码将执行此操作：

$(function() {
    $('#from').datepicker({
        defaultDate: '+5d',
        changeMonth: true,
        numberOfMonths:1,
        minDate:'+0d',
        dateFormat: 'DD, MM d, yy',
        onClose: function(dateText, inst) {
            if (dateText !== '') {
                try {
                    var fromDate = $.datepicker.parseDate(inst.settings.dateFormat, dateText, inst.settings);
                    fromDate.setDate(fromDate.getDate() + 1);
                    $('#to').datepicker('option', 'minDate', fromDate);
                }
                catch (err) {
                    console.log(err);
                }
            }
            else {
                //If #from is empty, restore the original limit in #to
                $('#to').datepicker('option', 'minDate', '+0d');
            }
        }

    });

    $('#to').datepicker({
        defaultDate: '+5d',
        changeMonth: true,
        numberOfMonths:1,
        minDate:'+0d',
        dateFormat: 'DD, MM d, yy',
        onClose: function(dateText, inst) {
            if (dateText !== '') {
                try {
                    var toDate = $.datepicker.parseDate(inst.settings.dateFormat, dateText, inst.settings);
                    toDate.setDate(toDate.getDate() - 1);
                    $('#from').datepicker('option', 'maxDate', toDate);
                }
                catch (err) {
                    console.log(err);
                }
            }
            else {
                //If #to is empty, remove the limit in #from
                $('#from').datepicker('option', 'maxDate', null);
            }
        }
    });
});

这两个onClose 函数非常相似，可以概括为一个函数，但我认为这样更容易理解发生了什么。

此外，不再需要 #from 或 #to 中的 onClick 处理程序。

【讨论】：