wdatepicker關聯日期處理

wdatepicker官方網站http://my97.net/index.asp

我在項目中需要讓用戶按年、月、日選擇一個時間段，比如在按月時間段中選擇了2016年5月，則兩個輸入框中就分別顯示 2016-05-01 和 2016-06-01

1.引用jquery和wdatepicker

<script type="text/javascript" src="${ctx}/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${ctx}/js/calendar/WdatePicker.js"></script>

在這裏我jquery 我用的是1.8.3，wdatepicker是4.72。

只使用最新的jquery3.1.1有問題，日期選擇框彈不出來。具體支持到jquery的那個版本沒有試驗。

這裏還引用了jquery3.1.1是兼容我部分代碼使用了on這個新的綁定事件的方法（有些地方的html標籤是通過jquery生成的，沒有用live方法去動態綁定，新jquery中用on代替了live方法）

2.html代碼部分

<div id="setting_data_time_free">
	<input type="text" id="data_time_start" value="2016-10-15"/>
	-
	<input type="text" id="data_time_end" value="2016-11-15"/>
</div>
<div id="setting_data_time_format" style="display:none;">
	<input type="button" id="data_time_format_year" class="button" value="按年"/>
	<input type="button" id="data_time_format_month" class="button" value="按月"/>
	<input type="button" id="data_time_format_day" class="button" value="按日"/>
</div>

3.javascript腳本部分

<script type="text/javascript">
		// 將 realDate格式化輸出
		function fmtRealDate(realDate){
			var str = "";
			var split = "-";
			str += realDate.y;
			str +=split;
			if(realDate.M<10){
				str += "0"+realDate.M;
			}else{
				str += realDate.M;
			}
			str +=split;
			if(realDate.d<10){
				str += "0"+realDate.d;
			}else{
				str += realDate.d;
			}
			return str;
		}

		// 年份選擇後，設置關聯結束時間
		function pickedYear(){
			var realDate = $dp.$D('data_time_start',{y:1});
			// $dp.$D隻影響了年份，還需要將月、日設置爲1
			realDate.M=1;
			realDate.d=1;
			$("#data_time_end").val(fmtRealDate(realDate));
			console.log("free year picked:"+$("#data_time_start").val());
			monitor.getData();
		}
		// 月份選擇後，設置關聯結束時間
		function pickedMonth(){
			var realDate = $dp.$D('data_time_start',{M:1});
			// $dp.$D隻影響了月份，還需要將日設置爲1
			realDate.d=1;
			$("#data_time_end").val(fmtRealDate(realDate));
			console.log("free month picked:"+$("#data_time_start").val());
			monitor.getData();
		}
		// 日期選擇後，設置關聯結束時間
		function pickedDay(){
			var realDate = $dp.$D('data_time_start',{d:1});
			$("#data_time_end").val(fmtRealDate(realDate));
			console.log("free day picked:"+$("#data_time_start").val());
			monitor.getData();
		}
		
		$("#data_time_format_year").on("click",function(){
			WdatePicker({el:'data_time_start',dateFmt:'yyyy-01-01',onpicked:pickedYear});
		});
		$("#data_time_format_month").on("click",function(){
			WdatePicker({el:'data_time_start',dateFmt:'yyyy-MM-01',onpicked:pickedMonth});
		});
		$("#data_time_format_day").on("click",function(){
			WdatePicker({el:'data_time_start',dateFmt:'yyyy-MM-dd',onpicked:pickedDay});
		});
</script>

以上代碼有幾處需要注意的地方（我踩過的坑）

第一：設置dateFmt時，使用‘yyyy-01-01’可以只選擇年份，很不錯的功能（月份同理）

第二：設置日期選擇後的觸發事件方法，要用onpicked（有3類，有興趣去看官網說明）

第三：wdatepicker的全局方法$dp.$D設置相對偏移時間格式。

第四：wdatepicker的全局方法$dp.$D返回的結果是個類，沒法直接顯示爲字符串時間結果。所有我用fmtRealDate函數去轉換了一下（realData類的參數，用瀏覽器的開發模式下查看一下就知道了）。