2012-04-11 5 views
1

내 애플리케이션에서는 날짜 선택 도구가 클릭시 캘린더 본문을 표시하고 오늘 날짜가 현재 날짜와 미래 날짜가 비활성화되도록 선택해야합니다. jquery에서 새로운 기능으로 인해 나를 괴롭혔습니다. 한 달. 도와주세요. 나는 datepicker를 표시 할 수 있고 2030 개까지의 날짜를 선택할 수 있지만 현재 날짜 또는 현재 날짜까지만 활성화되도록 캘린더가 필요합니다. 사전에 감사합니다. jquery datepicker에서 미래의 날짜를 사용 중지 할 수 없습니다.

내 달력은

<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로 더 좋습니다. 유일한 문제는 지금 나는 올해를 바꿀 수 없으며 나는 현재 년에 몇 달을 전환 할 수 있습니다. 표시되는 datepicker에 년을 포함시키고 테두리를 몇 개 넣을 수 있는지 보여주십시오. – mykey

1

당신은 maxDate를 사용할 수 있으며 minDate와 결합 : http://jqueryui.com/demos/datepicker/#option-maxDate

+0

이 코드가 있는데 작동하지 않습니다 ... : var dateToday = new Date(); . VAR 날짜 = $ ("#의 eff_date") 날짜 선택기 ({ defaultDate : "+ 1w" changeMonth : 사실, NUMBEROFMONTHS : 3, minDate : dateToday, onSelect를 : 기능 (되어 selectedDate) { VAR 옵션 = this.id == "eff_date"? "minDate": "maxDate", 인스턴스 = $ (this) .data ("datepicker"), 날짜 = $ .datepicker.parseDate (instance.settings.dateFormat || $. (옵션), 옵션, 날짜); } }); – mykey

1

, 쓰기 여기

는 스크립트와 링크 태그에서 참조 적절한 파일을 포함 가정, 완벽한 예입니다 :

1 개월 전과 1 달 후의 날짜를 표시하려면 minDate를 "-1m"로 변경할 수 있습니다. 귀하의 질문에 따라 maxDate : "+ 1d"를 입력하면 오늘부터 미래의 날짜를 비활성화 할 수 있습니다. 1y = 1 년, 1m = 1 개월, 1d = 1day.

관련 문제