1. 程式人生 > >My97DatePicker兩個日期範圍不超過30天,第一個小於第二個,都不大於當前日期

My97DatePicker兩個日期範圍不超過30天,第一個小於第二個,都不大於當前日期

My97DatePicker是很不錯的一個日期選擇外掛,體積只有幾十k但是功能非常強大。官網:http://www.my97.net/

能滿足很多苛刻的要求。

My97DatePicker 如果兩個輸入框,第一個不大於第二個,都不大於當前日期,兩個輸入框之間的時間不超過30天。做法。

如果第二個直接設定比第一個大的範圍不超過30天,那麼遇到算出來的日期大於當前日期的情況,就會發生第二個輸入框可以選擇到今天之後的日期。所以要動態地修改第二個輸入範圍。 1.設定第一個不大於第二個,不大於當前日期。 最小為第二個日期減去30天。 併為其設定選中和清空時的事件(用於對第二個輸入框進行控制) 2.第二個的規則用函式表示。 設定最大值為一個全域性變數。 通過第一個的兩個事件來修改這個全域性變數。 

兩個日期選擇視窗:

  <input type="text"  style="width:90px;" name="date1" id="datepicker1" size="24"   onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'datepicker2\')||\'new Date()\'}',minDate:'#F{$dp.$D(\'datepicker2\',{d:-30})}',onpicked:pickedFunc,oncleared:clearedFunc})  " value="" />

<input type="text" style="width:90px;" name="date2" id="datepicker2" size="24"  onfocus="picker2rule(this)" value="" />

動態修改第二個日期選擇視窗的函式:
<script type="text/javascript">
	var md=new Date(); //第二個輸入框最大值的全域性變數
       	//第一個輸入框選擇好日期的時候操作
       	function pickedFunc(){

  		var Y=$dp.cal.getP('y'); //用內建方法獲取到選中的年月日
  		var M=$dp.cal.getP('M');
  		var D=$dp.cal.getP('d');
  		M=parseInt(M,10)-1;
  		D=parseInt(D,10)+30; //字串的數字轉換成int再運算。並且如果超過30天,也能自動處理。
  		var d = new Date()
  		d.setFullYear(Y,M,D) //設定時間
  		var nowDate=new Date(); 
  		if(nowDate<=d){ //現在的時間比較,如果算出來的值大於現在時間,修改全域性變數md為現在時間。
  			md=nowDate;
  		}else{ //全域性變數設定為算出來的值得 
  			 var month=d.getMonth()+1; //月份的範圍是(0到11);
   			md=d.getFullYear()+"-"+month+"-"+d.getDate(); //直接把d給過去會有問題,所以拼成字串發過去
   		}
   	}
	 //第一個清空的時候的操作
	 function clearedFunc(){
	 	md=new Date();
	 }
	 //給第二個輸入框定義規則
	 function picker2rule(ele){
	 	WdatePicker({el:ele,minDate:'#F{$dp.$D(\'datepicker1\')}',maxDate:md})
	 }
</script>

效果示例:

第一個沒有選擇時第二個狀態:


第一個選擇日期,日期加上30天不超過當前日期的情況  第一個選5月5日,第二個的情況:


第一個選擇日期,日期加上30天超過當前日期的情況  第一個選5月5日,第二個的情況:


第一個清空的時候,第二個的情況:


轉載請註明原出處。歡迎交流。

2016.01.02更新: