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只影响了年份，还需要将月、日设置为1realDate.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只影响了月份，还需要将日设置为1realDate.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类的参数，用浏览器的开发模式下查看一下就知道了）。