x
首页 前端[Javascript] 一个简单的日期选择器

一个简单的日期选择器

发表于 2012-08-06 - 浏览:2309 评论:0 收藏 0


该日期选择器依赖于http://lowxp.com/js/g.js,暂时无法单独调用,日后再行整理。

日期选择器如图:

日期选择器

CSS部分:
#calendar{position:absolute;top:33px; left:55px; z-index:5}

.DATE{font-size:12px;color:#888;border:1px solid #ccc;background-color:#fff;border-radius:5px;padding:5px;z-index:3;line-height:12px;font-family:"Comic Sans MS", cursive}
.D-P1{color:#06F;padding:2px 0 5px;display:block;width:162px;text-align:center}
.D-P1 i{display:inline-block;text-align:center;padding:0 6px}
.D-P1 select{margin-right:1px;font-weight:bold;outline:none;color:#f60;text-indent:2px;font-family:'宋体'}
.D-P3{width:161px;padding-left:1px}
.D-P3 i,.D-P3 b{width:22px;height:12px;padding:4px 0;text-align:center;float:left;border:1px solid #eee;margin:-1px 0 0 -1px;position:relative}
.D-P3 i{cursor:pointer;color:#090}.D-P3 i.D_Now{background-color:#ffc;color:#F30}
.D-P3 i:hover,.D-P3 .ihover{font-weight:bold;color:#FFF;background-color:#9C0;z-index:1;border-color:#090}


Javascript部分:
$.DP=function(_){
	//示例:new $date({target:obj,from:[2012,11,11],to:[2012,11,11],index:[2011,11,11]});
	//默认值//必填参数,{target:元素}
	var t=this;
	Extend(t,{
		//target:o,//*必填,日期框,选中日期后将日期填入该input
		//from:'now',//格式[YYYY,MM,DD]
		//to:'now',//格式[YYYY,MM,DD]
		//index:'now',//默认选中值,格式[YYYY,MM,DD]
		order:0,//年份排序,倒序/顺序
		box:'calendar',
		hide:true
		//callback:function(date){t.target.value=date;[t.box].hide()}
	});
	Extend(t,_);
	t.onselect=typeof t.callback=='function'?function(date){t.callback(date);if(t.hide)[t.box].hide()}:function(date){t.target.value=date;if(t.hide)[t.box].hide()};
	var d=new Date();
	t.now=[d.getFullYear(),d.getMonth()+1,d.getDate()];
	if(t.form==undefined||t.from=='now')t.from=t.now;
	if(t.to==undefined||t.to=='now')t.to=t.now;
	if(t.index==undefined||t.index=='now')t.index=t.now;
	
	t.box=G(t.box);t.target=G(t.target);
	t.box.onclick=function(e){GE.stopBubble(e||window.event)},
	t.init();
	t.obj=$('.D-P1>i',t.box);
	t.year();t.month();t.day();
	$('>select',t.box).each(function(){this.onchange=function(){t.day()}});
}
$.DP.prototype={
	year:function(){
		var y=[],t=this;
		var a=t.from[0];
		var b=t.to[0]+1;
		for(var i=a;i<b;i++)y.push('<option value="'+i+'"'+(i==t.index[0]?' selected="selected"':'')+'>'+i+'年</option>');
		t.obj[0].innerHTML = '<select>'+(t.order?y.reverse().join(''):y.join(''))+'</select>';
	},
	month:function(){
		var m=[];
		for(var j=1;j<13;j++)m.push('<option value="'+(j-1)+'"'+(j==this.index[1]?' selected="selected"':'')+'>'+j+'月</option>');
		this.obj[1].innerHTML = '<select>'+m.join('')+'</select>';
	},
	day:function(){
		var t=this,c=$('>select',t.box),Y=c[0].value,M=c[1].value,a=new Date(Y,parseInt(M)+1,0),b=new Date(Y,M,1).getDay();
		var on=Y==t.now[0]&&M==t.now[1]-1,iday=t.now[2]-1;
		var str='<b>日</b><b>一</b><b>二</b><b>三</b><b>四</b><b>五</b><b>六</b>';
		for(var i=-b,l=a.getDate();i<l;i++){//(i%7==(b==0?0:(7-b))&&i!=-b)&&(str+='</div><div>');
			str+=i<0?'<b></b>':'<i'+(on&&iday==i?' class="D_Now"':'')+'>'+(i+1)+'</i>';
		}
		$('.D-P3',t.box)[0].innerHTML=str+'<div style="clear:both;overflow:hidden;height:0"></div>';
		$('.D-P3>i',t.box).each(function(){
			this.onmousedown=function(e){var date=c[0].value+'-'+(parseInt(c[1].value)+1)+'-'+this.innerHTML;t.onselect.call(t,date,e||window.event)};
			if($.isIE6){this.onmouseover=function(){[this].addClass('ihover')};this.onmouseout=function(){[this].removeClass('ihover')}}
		});
	},
	hide:function(){[this.box].hide()},
	init:function(){
		this.box.innerHTML='';
		var i=document.createElement('div');
		i.className='DATE';
		i.innerHTML='<span class="D-P1"><i></i><i></i></span><div class="D-P3"></div>';
		this.box.appendChild(i);
	}
}


调用示例:

<div id="calendar"></div>

<script type="text/javascript">
new $.DP({target:G('ttt'),from:[2010,1,1],to:[2016,11,12],box:'calendar'});
</script>

文章评论。。。