2012-04-11 4 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: "+ 1ワット"、 changeMonth:真、 NUMBEROFMONTHS:3、 MinDateプロパティ:dateToday、 にonSelect:機能(selectedDate){ VARオプション= this.id == "eff_date" "MinDateプロパティ":? "maxDateの"、 インスタンス= $(この).dataセクション( "日付ピッカー")、 日= $ .datepicker.parseDate(instance.settings.dateFormat || $。 datepicker._defaults.dateFormat、selectedDate、instance.settings); dates.not(本).datepicker( "オプション"、オプション、日付); }})。 – mykey

1

、書き込みここで

は、スクリプトとリンクタグで参照適切なファイルが含まれると仮定すると、完全な例です:

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

1か月前と1か月後の日付を表示する場合は、minDateを "-1m"に変更できます。あなたの質問によれば、今日からの将来の日を無効にする場合は、maxDate: "+ 1d"を入力することができます。1y = 1年、1m = 1month、1d = 1day。

関連する問題