Jquery ui datepickerは3日しか間隔がないように日付範囲を設定する.

2798 ワード

バックグラウンドのデータは比較的に大きくて、普通は千万級と百万級の関連で、クエリーはとても遅いので、後でもっとフィルタ条件を加えたいと思って、その中の時間は必ず選択しなければなりません.
製品はカレンダーコントロールに3日以内のクエリーしかできないようにし、カレンダーコントロールはこのような要求をし、前のカレンダーコントロールが2013年9月1日を選んだ場合
後のカレンダーコントロールは2013年9月1日、2013年9月2日、2013年9月3日しか選択できません.他のものはすべて選択できません.彼にヒントを与えたいのですが、リーダーはどうしてもそうしなければなりません.
本当にリーダーの一言で、コード工は何年も苦労していますね...まあ、jquery uiのカレンダーコントロールはこの機能を提供しています.強いです.
まずは公式サイトへ(http://jqueryui.com/download/#!version=1.9.2)jquery uiパッケージをダウンロードして1.92バージョンを使っています
ダウンロードしたら
導入


<script type="text/javascript"> 
$(function(){
   var dates = $("#startDate,#endDate");
    var option;
    var targetDate;
    var optionEnd;
    var targetDateEnd;
    dates.datepicker({
        showButtonPanel:false,
        onSelect: function(selectedDate){  
          if(this.id == "startDate"){
            //           (startDate)      (endDate)          
            option = "minDate"; //    
            var selectedTime = getTimeByDateStr(selectedDate);
            var minTime = selectedTime;
	    //                   
            targetDate = new Date(minTime); 
            //           
            optionEnd = "maxDate";
	    //                  2         2*24*60*60*1000
            targetDateEnd = new Date(minTime+2*24*60*60*1000);
          }else{
            //           (endDate)      (startDate)          
            option = "maxDate"; //    
            var selectedTime = getTimeByDateStr(selectedDate);
            var maxTime = selectedTime;
            targetDate = new Date(maxTime);
            //       
            optionEnd = "minDate";
            targetDateEnd = new Date(maxTime-2*24*60*60*1000);
          }
          dates.not(this).datepicker("option", option, targetDate);  
          dates.not(this).datepicker("option", optionEnd, targetDateEnd);  
        }
    });
</script> 
<input type="text" value="" name="<SPAN style="FONT-FAMILY: Arial, Helvetica, sans-serif">endDate</SPAN><SPAN style="FONT-FAMILY: Arial, Helvetica, sans-serif">"  readonly="true" id="endDate" title="        3 "/></SPAN>