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