点击text文本框弹出日期选择器特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是点击text文本框弹出日期选择器特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击text文本框弹出日期选择器</title>
<!--可无视-->
<style type="text/css">
body{margin:0;padding:0;font:14px Verdana, Arial, sans-serif;line-height:200%;}
#content{padding-left:50px;padding-right:50px;}
#content h2{font-size:18px;color:#1E9300;padding-top:8px;margin-bottom:8px;}
#content h3{margin-top:8px;margin-bottom:8px;FONT:bold 14px 宋体,tahoma,arial,sans-serif;COLOR:#0033CC;}
#content div{margin-top:10px;margin-bottom:10px;border:#666 solid 1px;padding:10px;}
#content span{color:#f00;font-weight:bold;}
ul, ol{color:#000000;}
</style>
<!--必要js文件/样式表已经引入在js里面了-->
<script type="text/javascript" src="lhgcore.js"></script>
<script type="text/javascript" src="lhgcalendar.js"></script>
</head>
<body>
<div id="content">
	<h2>常规弹出日历示例页</h2>
	<hr size="1" style="width:400px;" align="left">
	<h3>1. 在控件下面或右面弹出日历组件（默认是在下面弹出） </h3>
	<div>
		<input type="text" id="c1" onclick="J.calendar.get();"/>&nbsp;显示在下面&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="text" id="c2" onclick="J.calendar.get({dir:'right'});"/>&nbsp;显示在右面
	</div>
	
	<h3>2. 通过按钮或图片等其它控件弹出日历组件</h3>
	<div>
		<input type="text" id="c3"/>
		<input type="button" id="btn" onclick="J.calendar.get({id:'c3'});" value="弹出"/>&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="text" id="c4"/>
		<img align="absmiddle" src="images/date.gif" onclick="J.calendar.get({id:'c4'});"/>
	</div>
	
	<h3>3. 显示日期的2种格式（默认为 年-月-日 格式）</h3>
	<div>
		<input type="text" id="c5" onclick="J.calendar.get();"/>&nbsp;年-月-日 格式&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="text" id="c6" onclick="J.calendar.get({type:'/'});"/>&nbsp;月/日/年 格式
	</div>
	
	<h3>4. 在文本框显示带时间的日期</h3>
	<div>
		<input type="text" id="c7" onclick="J.calendar.get({time:true});"/>
	</div>
	
	<h3>5. 日期范围限制</h3>
	<div>
		<input type="text" id="c8" onclick="J.calendar.get({to:'2009-8-8,min'});"/>&nbsp;只能选择2009-8-8以前的日期&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="text" id="c9" onclick="J.calendar.get({to:'2009-8-18,max'});"/>&nbsp;只能选择2009-8-18以后的日期<br/>
		<input type="text" id="c10" onclick="J.calendar.get({to:'c11,min'});"/>
		<input type="text" id="c11" onclick="J.calendar.get({to:'c10,max'});"/>&nbsp;这2个文本框，前面的日期不能大于后面的日期，后面的不能小于前面的日期。
	</div>
</div>
</body>
</html>

JS代码(lhgcalendar.js):

/* *@Generator -> Calendar Dialog Plugins - Date:2009-8-1 *@Copyright lhgcore.js (c) 2009 By LiHuiGang Reserved */
var calendar = function(b){
	var p = this._p = new J.panel(b);
	p.applnk( J.path() + 'lhgcalendar.css' );
	J(p._main).acls('cal_panel');
	if(J.clean) lhgcore.clean.items( this,this.c_clean );
	this.createbody( this._p._doc,this._p._main );
	J.nosel(this._p._doc.body);
	if(J.ie){
	try{
	document.execCommand('BackgroundImageCache',false,true);
}
catch(e){
}
}
;
}
;
	J.exend( calendar.prototype,{
	get:function(obj){
	var ev = J.gtev(),e = ev.srcElement || ev.target,id;
	if( obj && obj.id ) id = J(obj.id).val();
	else id = e.value;
	if( obj && obj.to ) this.to( obj.to );
	else this.than = this.ty = this.tm = this.td = null;
	this.draw(id);
	this.inu = ( obj && obj.id ) ? obj.id:e;
	this.type = ( obj && obj.type ) ? obj.type:'-';
	this.time = ( obj && obj.time ) ? obj.time:false;
	if( obj && obj.dir == 'right' ) this._p.show( e.offsetWidth,0,e );
	else this._p.show( 0,e.offsetHeight,e );
	ev.stopPropagation ? ev.stopPropagation():(ev.cancelBubble = true);
}
,createbody:function(d,m){
	var chead = J(d).crte('div'),txt;
	txt = '<div id="date"><span id="year"></span>&nbsp;
	年&nbsp;
	<span id="month"></span>&nbsp;
	月</div>';
	txt = '<div id="py">&nbsp;
	</div><div id="pm">&nbsp;
	</div>' + txt + '<div id="ny">&nbsp;
	</div><div id="nm">&nbsp;
	</div>';
	J(chead).stcs({
	width:'154px',height:'30px'}
).html(txt);
	J(m).apch(chead);
	txt = '<table width="100%" cellspacing="0" cellpadding="0" border="0">' + '<thead id="tdy"><tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></thead>' + '<tbody id="idcal"></tbody></table>' + '<div id="foot"><span id="t1">今天</span><span id="t2">' + new Date().toLocaleDateString() + '</span></div>';
	var cbody = J(d).crte('div');
	J(cbody).stcs('width','154px').html(txt);
	J(m).apch(cbody);
	J('py',d).click(this.py);
	J('pm',d).click(this.pm);
	J('ny',d).click(this.ny);
	J('nm',d).click(this.nm);
	J('year',d).click(this.year);
	J('month',d).click(this.month);
	J('t1',d).hover(function(){
	J(this).stcs({
	border:'1px solid #0a246a',backgroundColor:'#c2cbe0'}
);
}
,function(){
	J(this).stcs({
	border:'1px solid #e3e3e3',backgroundColor:'#f7f7f7'}
);
}
).click(function(){
	var d = new Date(),y = d.getFullYear(),m = d.getMonth() + 1,t = d.getDate();
	if( J.calendar.type == '-')J(J.calendar.inu).val( y + '-' + m + '-' + t );
	elseJ(J.calendar.inu).val( m + '/' + t + '/' + y );
	J.calendar._p.hide( this,J.calendar._p );
}
);
}
,draw:function(s){
	var p,d = new Date(),a = [],fd,md,frag,doc = this._p._doc,cal = J('#idcal',doc);
	if( s && J.inde(s,'-') >= 0 ){
	p = J.trim(s).split('-');
	p[2] = J.trim( p[2].substr(0,2) );
	d = new Date( p[0],p[1]-1,p[2] );
}
else if( s && J.inde(s,'/') >= 0 ){
	p = J.trim(s).split('/');
	p[2] = J.trim( p[2].substr(0,4) );
	d = new Date( p[2],p[0]-1,p[1] );
}
this.y = d.getFullYear();
	this.m = d.getMonth() + 1;
	this.d = d.getDate();
	fd = new Date(this.y,this.m - 1,1).getDay();
	md = new Date(this.y,this.m,0).getDate();
	for( var i = 1;
	i <= fd;
	i++ ) a.push(0);
	for( var i = 1;
	i <= md;
	i++ ) a.push(i);
	frag = doc.createDocumentFragment();
	while( a.length ){
	var row = J(doc).crte('tr');
	for( var i = 0;
	i < 7;
	i++ ){
	var cell = J(doc).crte('td');
	J(cell).acls('tdday').html('&nbsp;
	');
	if( a.length ){
	var day = a.shift();
	if(day){
	if( this.than && this.than == 'min' ){
	if( this.y < this.ty || (this.y == this.ty && this.m < this.tm) || (this.y == this.ty && this.m == this.tm && day < this.td) ){
	if( day == this.d ) J(cell).acls('tday');
	J(cell).html(day).msover(this.over).msout(this.out).click(this.setdate);
}
else J(cell).html(day).stcs('color','#999');
}
else if( this.than && this.than == 'max' ){
	if( this.y > this.ty || (this.y == this.ty && this.m > this.tm) || (this.y == this.ty && this.m == this.tm && day > this.td) ){
	if( day == this.d ) J(cell).acls('tday');
	J(cell).html(day).msover(this.over).msout(this.out).click(this.setdate);
}
else J(cell).html(day).stcs('color','#999');
}
else{
	if( day == this.d ) J(cell).acls('tday');
	J(cell).html(day).msover(this.over).msout(this.out).click(this.setdate);
}
}
}
J(row).apch(cell);
}
J(frag).apch(row);
}
while( cal.hasChildNodes() ) J.rech(cal.firstChild);
	J(cal).apch(frag);
	J('year',doc).html(this.y);
	J('month',doc).html(this.m);
	var iw = this._p._main.offsetHeight;
	J(this._p._ifrm).stcs({
	height:iw + 'px'}
);
}
,to:function(l){
	var a = l.split(','),v = J('#'+a[0]) ? J.trim(J(a[0]).val()):a[0];
	if( J('#'+a[0]) && J(a[0]).isnl() ){
	this.than = this.ty = this.tm = this.td = null;
	return;
}
var p = v.split('-'),d = new Date( p[0],p[1]-1,p[2] );
	this.than = a[1];
	this.ty = d.getFullYear();
	this.tm = d.getMonth() + 1;
	this.td = d.getDate();
}
,py:function(){
	J.calendar.predraw( new Date(J.calendar.y - 1,J.calendar.m - 1,J.calendar.d) );
}
,pm:function(){
	J.calendar.predraw( new Date(J.calendar.y,J.calendar.m - 2,J.calendar.d) );
}
,ny:function(){
	J.calendar.predraw( new Date(J.calendar.y + 1,J.calendar.m - 1,J.calendar.d) );
}
,nm:function(){
	J.calendar.predraw( new Date(J.calendar.y,J.calendar.m,J.calendar.d) );
}
,cy:function(){
	if( this.value < 1900 ) this.value = 1900;
	if( this.value > 2099 ) this.value = 2099;
	J.calendar.predraw( new Date(this.value,J.calendar.m - 1,J.calendar.d) );
}
,cm:function(){
	if( this.value < 1 ) this.value = 1;
	if( this.value > 12 ) this.value = 12;
	J.calendar.predraw( new Date(J.calendar.y,this.value - 1,J.calendar.d) );
}
,predraw:function(d){
	this.draw( d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() );
}
,setdate:function(){
	var c = J.calendar,d = J(this).html(),time;
	if( c.m < 10 ) c.m = '0' + c.m;
	if( d < 10 ) d = '0' + d;
	time = c.time ? new Date().toLocaleTimeString():'';
	if( time != '' ) time = time.length < 8 ? ' 0' + time:' ' + time;
	if( c.type == '-') J(c.inu).val( c.y + '-' + c.m + '-' + d + time );
	else J(c.inu).val( c.m + '/' + d + '/' + c.y + time );
	c._p.hide( this,c._p );
}
,over:function(){
	if( this.className != 'tday' ) J(this).acls('over');
	var c = J.calendar,d = J(this).html();
	J('t2',c._p._doc).html( c.y + '年' + c.m + '月' + d + '日' );
}
,out:function(){
	if( this.className != 'tday' ) J(this).acls('tdday');
	J('t2',J.calendar._p._doc).html( new Date().toLocaleDateString() );
}
,year:function(){
	J(this).html('<input id="iy" type="text" value="' + J.calendar.y + '" style="width:32px;
	">');
	var obj = J.calendar._p;
	J('#iy',obj._doc).focus();
	J('iy',obj._doc).blur(J.calendar.cy);
	J('iy',obj._doc).click(function(e){
	var ev = e || obj._ifrm.contentWindow.event;
	ev.stopPropagation ? ev.stopPropagation():(ev.cancelBubble = true);
}
);
}
,month:function(){
	J(this).html('<input id="im" type="text" value="' + J.calendar.m + '" style="width:20px;
	">');
	var obj = J.calendar._p;
	J('#im',obj._doc).focus();
	J('im',obj._doc).blur(J.calendar.cm);
	J('im',obj._doc).click(function(e){
	var ev = e || obj._ifrm.contentWindow.event;
	ev.stopPropagation ? ev.stopPropagation():(ev.cancelBubble = true);
}
);
}
,c_clean:function(){
	this.type = null;
	this.than = null;
	this.time = null;
	this.inu = null;
	this._p = null;
}
}
);
	J(window).aevt( 'load',function(){
	J.calendar = new calendar(J.califrm);
}
);

CSS代码(lhgcalendar.css):

/* *@Generator -> Panel Plugins - Build 2009-4-27 *@Copyright (c) 2009 LiHuiGang - lhgpanel.css */
.cal_panel{cursor:default;border:2px solid #0aa6e0;padding:3px 2px 2px 3px;background-color:#fff;background-image:url(images/d_h_bg.gif);background-repeat:repeat-x;font:12px Verdana,Arial,sans-serif;}
.cal_panel #py,.cal_panel #pm,.cal_panel #ny,.cal_panel #nm{cursor:pointer;position:absolute;width:9px;height:10px;top:17px;line-height:10px;background-image:url(images/d_a_bg.gif);background-repeat:no-repeat;}
.cal_panel #date{cursor:default;position:absolute;left:34px;width:96px;top:13px!important;top:14px;text-align:center;height:16px;line-height:16px;}
.cal_panel #year,.cal_panel #month{font:11px Verdana,Arial,sans-serif;}
.cal_panel #py{left:10px;background-position:0 -10px;}
.cal_panel #pm{left:24px;background-position:0 -30px;}
.cal_panel #ny{right:10px;+left:144px;background-position:0 0;}
.cal_panel #nm{right:24px;+left:130px;background-position:0 -20px;}
.cal_panel table thead{color:#0597db;text-align:center;height:22px;font:14px 幼圆,Tahoma,Arial,sans-serif;font-weight:bold;vertical-align:top;}
.cal_panel tbody td{text-align:center;vertical-align:middle;width:22px;height:22px;font:11px Verdana,Arial,sans-serif;}
.cal_panel .tdday{background-image:url(images/d_t_bg.gif);background-repeat:no-repeat;background-position:0 0;}
.cal_panel .tday,.cal_panel .over{background-image:url(images/d_t_bg.gif);background-repeat:no-repeat;background-position:0 -22px;}
.cal_panel #iy,.cal_panel #im{border:1px solid #7f9db9;height:16px;font:11px Verdana,Arial,sans-serif;}
.cal_panel #foot{height:20px;margin-top:1px;}
.cal_panel #t1{position:relative;top:3px;background-color:#f7f7f7;border:1px solid #e3e3e3;padding:2px 5px 1px 5px;_padding:4px 5px 0px 5px;}
.cal_panel #t2{position:relative;font:11px Verdana,Arial,sans-serif;top:3px;left:15px;color:#039;}

附件:下载该文件资源,减少时间成本(增值服务)