非常好用的日期picker - WdatePicker 妙用

最近公司在做一个法律搜索的系统，系统设计到日期的地方，设计人员希望使用日期插件，对用户更友好一些，当然大家都知道如果使用插件，输入的日期的格式的灵活性会或多或少的下降，一般我们使用日期插件就只能输入**年**月**日。

 

这里我们选择的是WdatePicker，比较好用的一款日期插件，但是该功能添加完成以后，测试人员提出要不仅仅能够按照日期进行查询，还要直接按照月份，或者是按照年份查询，当然 这个通过选择某一年的第一天和最后一天也可以查询一年，但是这样对用户多少有些不友好了。

 

功能改进前：

 

 

下面是我对系统改进后的界面：

默认情况下，当文本框获得焦点时，还是以日期的形式出现，当点击按月或者按年的以后，文本框再次获得焦点的时候，此时弹出的日期 picker就是 按年或者按月的了。。

 

   默认的按日期

   点击按月单选按钮后，按月选择
 
点击 按年单选按钮后，按年选择。。

 

 

代码很简单：

 

// 界面加载完成后运行
$(document).ready(function(){
        // 默认绑定按日期
	$(".t").click(function(){
		WdatePicker({dateFmt:'yyyyMMdd'})
	});
        // 当选择形式发生变化以后，重新绑定click事件，或者是focus事件
	$(".tt").change(function() {
		$(".t").unbind();  
		if($(this).val() == "yyyy") {
			$(".t").click(function(){
				WdatePicker({dateFmt:'yyyy'})
			});
		} else if($(this).val() == "yyyyMM") {
			$(".t").click(function(){
				WdatePicker({dateFmt:'yyyyMM'})
			});
		} else if($(this).val() == "yyyyMMdd") {
			$(".t").click(function(){
				WdatePicker({dateFmt:'yyyyMMdd'})
			});
		}
	});
});

 

这个是日期时间 一起的。。