用JQuery写的日期时间选择函数

这些天想要一个日期控件。找了很久没找到合适的，要么功能不好，要么文件体积太大。于是就自己写了一个。但用起来感觉到有点不恰当的地方。现在发布出来，欢迎大家使用。同时也请提出宝贵的意见。

 

本控件特点：共有两个函数，一个调用函数，一个执行函数。总共代码5.1K左右。当然，是适当的去掉了空行后的。可以选择时间。

 

调用方法参考：

enable_selectdate(":text");      //将所有<input type="text" />的文本框添加日期选择控件

enable_selectdate("input[name='time1'],input[name='time2']");     //将 name为time1和time2的文本框添加日期选择控件。

 

欢迎各位拍砖。

 

function enable_selectdate(selector){
	$(selector).each(function(){
		$(this).bind("focus",function(){lxg_datepicker(this);});
	});
}
function lxg_datepicker(obj){
	var inputer=$(obj);
	var date_reg=/^[\d]{4}-[\d]{1,2}-[\d]{1,2}( [\d]{1,2}\:[\d]{1,2}\:[\d]{1,2})?$/;
	var t=inputer.val();var c_time=0;
	if(t.search(date_reg)==-1){
		t=new Date();
	}else{
		if(t.indexOf(' ')>0){
			t=t.split(' ');t=t[0].split('-').concat(t[1].split(':'));
			t=new Date(t[0],parseInt(t[1])-1,t[2],t[3],t[4],t[5]);
			c_time=1;
		}else{
			t=t.split("-");t=new Date(t[0],parseInt(t[1])-1,t[2]);
		}
	}
	var input_y=t.getFullYear();var input_m=t.getMonth();var input_d=t.getDate();
	var input_h=t.getHours();var input_mi=t.getMinutes();var input_s=t.getSeconds();
	var sd_y=input_y;var sd_m=input_m;
	var m_arr=new Array("01","02","03","04","05","06","07","08","09","10","11","12");
	if($("#date_dialog").length==0){
		var l='<div id="date_dialog" style="border:2px outset #eee;padding:5px;width:218px;position:absolute;z-index:11;background:#ccc;">';
		l+='<form><input type="button" style="width:23px;padding:0;" value="-" id="sd_dyear" /><input type="button" style="width:23px;padding:0;" value="+" id="sd_ayear" /> <select id="sd_select_year" style="width:52px;">';
		for(i=2020;i>=1970;i--){l+='<option value="'+i+'">'+i+'</option>';}
		l+='</select> <select id="sd_select_month" style="width:40px;">';
		for(i=0;i<12;i++){l+='<option value="'+i+'">'+m_arr[i]+'</option>';}
		l+='</select> <input type="button" style="width:23px;padding:0;" value="-" id="sd_dmonth" /><input type="button" style="width:23px;padding:0;" value="+" id="sd_amonth" />';
		l+='<div id="sd_table"></div>'
		l+='<div><div style="text-align:left;padding-bottom:5px;"><input type="checkbox" id="sd_addtime" />同时选择时间</div>';
		l+='<select id="sd_select_hour" style="width:38px;">';for(i=23;i>=0;i--)l+='<option value="'+i+'">'+i+'</option>';l+='</select>时';
		l+='<select id="sd_select_minute" style="width:38px;">';for(i=59;i>=0;i--)l+='<option value="'+i+'">'+i+'</option>';l+='</select>分';
		l+='<select id="sd_select_second" style="width:38px;">';for(i=59;i>=0;i--)l+='<option value="'+i+'">'+i+'</option>';l+='</select>秒';
		l+=' <input type="button" id="sd_cancle" value="取消" /></div>';
		l+='</form></div>';
		$("body").append(l);
		$("#sd_cancle").bind("click",function(){
			$("#date_dialog").hide();$("select").css("visibility","inherit");
		});
	}
	$("#sd_select_year,#sd_select_month,#sd_dmonth,#sd_amonth,#sd_dyear,#sd_ayear").unbind();
	var sd_year=$("#sd_select_year").val(input_y+'').bind("change",sd_show);
	var sd_month=$("#sd_select_month").val(input_m+'').bind("change",sd_show);
	if(c_time==1){$("#sd_addtime").attr("checked","checked");}else{$("#sd_addtime").attr("checked","");}
	var sd_hour=$("#sd_select_hour").val(input_h+'');
	var sd_minute=$("#sd_select_minute").val(input_mi+'');
	var sd_second=$("#sd_select_second").val(input_s+'');
	$("#sd_dyear").bind("click",{"m":-12},changeselect);$("#sd_ayear").bind("click",{"m":12},changeselect);
	$("#sd_dmonth").bind("click",{"m":-1},changeselect);$("#sd_amonth").bind("click",{"m":1},changeselect);
	function changeselect(event){
		var m=event.data.m;var t=new Date(sd_y,sd_m+m,1);sd_year.val(t.getFullYear()+'');sd_month.val(t.getMonth()+'');sd_show();
	}
	t=inputer.offset();
	$("#date_dialog").show().css({"left":t.left+"px","top":(t.top+inputer.height()+8)+"px","text-align":"center"});
	$("select").css("visibility","hidden");$("#date_dialog select").css("visibility","inherit");
	function sd_show(){
		sd_y=parseInt(sd_year.val());sd_m=parseInt(sd_month.val());
		t=new Date(sd_y,sd_m,1);sd_fwd=t.getDay();
		t=new Date(sd_y,sd_m+1,0);sd_mdays=t.getDate();
		$("#sd_table>table td").unbind();
		var s='<table border="0" cellspacing="0" width="208" cellpadding="3">';
		s+='<tr><th style="color:#f00;">日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th style="color:#f00;">六</th></tr>';
		if(sd_fwd>0){s+='<tr>';for(var j=0;j<sd_fwd;j++){s+='<td></td>';}}else{var j=0;}
		for(var i=1;i<=sd_mdays;i++,j++){
			if(j%7==6){s+='<td style="color:#f00;">'+i+'</td></tr>';}else{if(j%7==0){s+='<tr><td style="color:#f00;">'+i+'</td>';}else{s+='<td>'+i+'</td>';}}
		}
		if(j%7!=0){do{s+='<td></td>';j++;}while(j%7!=0);}
		s+='</tr></table>'
		$("#sd_table").html(s);
		$("#sd_table>table td,#sd_table>table th").css("background-color",'#ccc');
		$("#sd_table>table td").each(function(){
			e=$(this);
			if(e.html()!=""){
				e.css({"cursor":"pointer"}).bind("click",function(){
					t='';if($("#sd_addtime").attr("checked")==true&&(sd_hour.val()!="0"||sd_minute.val()!="0"||sd_second.val()!="0"))t=' '+sd_hour.val()+':'+sd_minute.val()+':'+sd_second.val();
					inputer.val(sd_y+'-'+(sd_m+1)+'-'+$(this).html()+t);$("#sd_cancle").click();
				});
				if(input_y==sd_y&&input_m==sd_m&&input_d==parseInt(e.html())){
					e.css({"background-color":"#fa6"});
				}else{
					e.bind("mouseover",function(){$(this).css("background-color","#bbb");}).bind("mouseout",function(){$(this).css("background-color","#ccc");});
				}
			}
		});
	}
	sd_show();
}

 

评论

6 楼 笨笨林 2010-11-05  

多谢，现在改了一下，界面不打算改了。没有隐藏SELECT元素，增加点击控件以外的地方隐藏控件。

5 楼 jordan_micle 2010-10-08  

值得学习。
但是界面有点粗糙。而且一选择的时候页面其他的select元素都会隐藏？？我在chrome下浏览的

4 楼 笨笨林 2010-10-07  

演示地址：http://www.0795fcw.com/houseadd.php
在表单尾部。

3 楼 風一樣的男子 2009-12-21  

没有 Demo 看效果啊？

2 楼 ustcfxx 2009-12-17  

期待Demo 

1 楼 笨笨林 2009-12-17  

JQuery1.3.2版本，在FF。IE6，IE7，IE8下测试通过。