无法在 jquery datepicker 中禁用未来日期答案

【问题标题】：unable to disable future date in jquery datepicker无法在 jquery datepicker 中禁用未来日期
【发布时间】：2012-04-11 16:11:54
【问题描述】：

我的应用程序要求日期选择器应在单击时显示日历正文，选择日期今天的日期处于活动状态并停用未来的日期......我是 jquery 的新手，它困扰了我一个月。请帮忙。我可以显示日期选择器并选择直到 2030 年的任何日期，但我需要日历仅在今天或当前日期处于活动状态。提前致谢。

要显示我的日历..

<table id="calenderTable" class="">
                <tbody id="calenderTableHead">
                    <tr>
                        <td colspan="4" align="center">
                            <select onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value,
                                this.selectedIndex, false));" id="selectMonth">
                                <option value="0">Jan</option>
                                <option value="1">Feb</option>
                                <option value="2">Mar</option>
                                <option value="3">Apr</option>
                                <option value="4">May</option>
                                <option value="5">Jun</option>
                                <option value="6">Jul</option>
                                <option value="7">Aug</option>
                                <option value="8">Sep</option>
                                <option value="9">Oct</option>
                                <option value="10">Nov</option>
                                <option value="11">Dec</option>
                            </select>
                        </td>
                        <td colspan="2" align="center">
                            <select onChange="showCalenderBody(createCalender(this.value,
                document.getElementById('selectMonth').selectedIndex, false));" id="selectYear">
                            </select>
                        </td>
                        <td align="center">
                            <a href="#" onClick="closeCalender();"><font color="#003333" size="+1">X</font></a>
                        </td>
                    </tr>
                </tbody>
                <tbody id="calenderTableDays">
                    <tr style="">
                        <td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td>
                    </tr>
                </tbody>
                <tbody id="calender"></tbody>
            </table>

日期字段如下：

    <tr>
       <td>effected date</td>
             <td>
                 <input type="text" name="eff_date" class="required" id="eff_date"><a href="#" onClick="setYears(1947, 2030);
 showCalender(this, 'eff_date');" class="" id="calender">
   <img src="Calender/calender.png"></a>
              </td>
      </tr>

【问题讨论】：

标签： html jsp jquery-ui-datepicker

【解决方案1】：

假设我理解了这个问题，这很容易完成。您想设置最大允许的可选日期，对吗？您只需要使用 maxDate 选项即可。

这是一个完整的示例，假设您包含脚本和链接标签中引用的正确文件：

<!DOCTYPE HTML>
<html>
<head>
    <title>date</title>
    <meta charset="utf-8">
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />   
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
    <div class="demo">
        <p>Date: <input type="text" id="datepicker"></p>
    </div>
<script>
$(function() {
    $("#datepicker").datepicker({maxDate: '+0d'});
});
</script>
</body>
</html>

你可以看到它在这里工作： http://gigaloop.com/answers/date.html

【讨论】：

感谢它正在工作，我使用的是日历，但现在使用 jquery datepicker 效果更好。唯一的问题是现在我无法更改年份，我只能在当年切换月份。请展示我如何在显示的日期选择器中包含年份并添加一些边框。

【解决方案2】：

您可以使用 maxDate 并与 minDate 结合使用： http://jqueryui.com/demos/datepicker/#option-maxDate

【讨论】：

我有这个代码，但它不工作......：var dateToday = new Date(); var dates = $("#eff_date").datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 3, minDate: dateToday, onSelect: function(selectedDate) { var option = this.id == "eff_date " ? "minDate" : "maxDate", instance = $(this).data("datepicker"), date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance .settings); dates.not(this).datepicker("option", option, date); } });

【解决方案3】：

在脚本标签中，写：

     $(function() {
        $( "#datepicker-1" ).datepicker({
            minDate:"Now", maxDate: "+1m+1d"
        }); 
     });

如果您想显示 1 个月前和未来 1 个月的日期，您可以将 minDate 更改为“-1m”。根据您的问题，如果您想从今天起禁用未来几天，您可以输入 maxDate: "+1d" 。 1y=1year,1m=1month,1d=1day。

【讨论】：