2012-04-11 159 views
1

我的应用程序要求日期选择器应该显示点击日历日历,选择日期今天的日期活跃和未来的日期停用...我是新的jQuery中,它已经打扰我一个月。请协助。我能够显示日期选择器并选择2030年前的任何日期,但是我需要日历日历或当前日期。 在此先感谢。无法禁用jQuery日期选择器中的未来日期

我的压延机来显示..

<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> 

回答

4

这是相当假设我理解这个问题很简单。你想设置最大允许的可选日期,对吗?所有你需要使用的是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

+0

感谢它正在工作,我使用日历,但现在用jquery datepicker更好。唯一的问题是现在我不能改变这一年,我只能在当年转换几个月。可以请说明我如何在显示的日期选择器中包含这些年份,并放置一些边框。 – mykey 2012-04-12 12:34:25

1

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

+0

我有这段代码,它不工作...:var dateToday = new Date(); 。 VAR日期= $( “#eff_date”)日期选择器({ defaultDate: “+1瓦特”, changeMonth:真实, NUMBEROFMONTHS:3, 的minDate:dateToday, ONSELECT:功能(selectedDate){ VAR选项= 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); } }); – mykey 2012-04-11 16:34:37

1

在脚本标签,写上:

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

如果要显示日期从1个月前和1个月后的日期,可以将minDate更改为“-1m”。根据你的问题,如果你想从今天起禁用未来的日子,你可以把maxDate:“+ 1d”。 1年= 1年,1分= 1月,1天= 1天。

相关问题