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类的参数，用浏览器的开发模式下查看一下就知道了）。