当前位置: 代码迷 >> Web前端 >> 十分好用的日期picker - WdatePicker 妙用
  详细解决方案

十分好用的日期picker - WdatePicker 妙用

热度:776   发布时间:2013-11-09 17:06:34.0
非常好用的日期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'})
			});
		}
	});
});
?

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


?

1 楼 lgstarzkhl 2010-08-31  
有时间的选择吗这个?
2 楼 hupy 2010-08-31  
lgstarzkhl 写道
有时间的选择吗这个?


可以的,调一下 时间格式就可以了。。

  相关解决方案