点击文本框弹出日期

原创 2007年10月15日 13:21:00

JS文件(birthday.js): 

// JavaScript Document
//
日历
var date_start,date_end,g_object
var today = new Date();
var separator="-";
var inover=false;

//mode :时间变换的类型0-年 1-月 2-直接选择月
function change_date(temp,mode)
...{
var t_month,t_year
if (mode)...{
if(mode==1)
t_month
=parseInt(cele_date_month.value,10)+parseInt(temp,10);
else
t_month
=parseInt(temp)
if (t_month<cele_date_month.options(0).text) ...{
cele_date_month.value
=cele_date_month.options(cele_date_month.length-1).text;
change_date(parseInt(cele_date_year.value,
10)-1,0);
}

else...{
if (t_month>cele_date_month.options(cele_date_month.length-1).text)...{
cele_date_month.value
=cele_date_month.options(0).text;
change_date(parseInt(cele_date_year.value,
10)+1,0);
}
 
else
...{cele_date_month.value=t_month;
set_cele_date(cele_date_year.value,cele_date_month.value); 
}

}

}
 
else...{
t_year
=parseInt(temp,10);

if (t_year<cele_date_year.options(0).text) ...{
cele_date_year.value
=cele_date_year.options(0).text;
set_cele_date(cele_date_year.value,
1); 
}

else...{
if (parseInt(t_year,10)>parseInt(cele_date_year.options(cele_date_year.length-1).text,10))...{
cele_date_year.value
=cele_date_year.options(cele_date_year.length-1).text;
set_cele_date(cele_date_year.value,
12); 
}
 
else
...{cele_date_year.value=t_year;
set_cele_date(cele_date_year.value,cele_date_month.value); 
}

}

}


window.cele_date.focus();

}


//初始化日历
function init(d_start,d_end)
...{
var temp_str;
var i=0
var j=0
date_start
=new Date(1980,7,1)
date_end
=new Date(2004,8,1)
document.writeln(
"<div name="cele_date" id="cele_date" style="display:none" style="LEFT: 69px; POSITION: absolute; TOP: 159px;Z-INDEX:99" onClick="event.cancelBubble=true;" onBlur="hilayer()" onMouseout="lostlayerfocus()">-</div>");
window.cele_date.innerHTML
="";
temp_str
="<table border="1" bgcolor="#DDDDDD" bordercolor="white"><tr><td colspan=7 onmouseover="overcolor(this)">";
temp_str
+="<input type="Button" value="<<" onclick="change_date(-1,1)" onmouseover="getlayerfocus()" style="color: #000099; background-color: #BFBFBF; cursor: hand">-";

temp_str
+=""
temp_str
+="<select name="cele_date_year" id="cele_date_year" language="javascript" onchange="change_date(this.value,0)" onmouseover="getlayerfocus()" onblur="getlayerfocus()" style="font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB">"

for (i=1900;i<=2020;i++)
...{
temp_str
+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";
}

temp_str
+="</select>-";
temp_str
+=""
temp_str
+="<select name="cele_date_month" id="cele_date_month" language="javascript" onchange="change_date(this.value,2)" onmouseover="getlayerfocus()" onblur="getlayerfocus()" style="font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB">"

for (i=1;i<=12;i++)
...{
temp_str
+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";
}

temp_str
+="</select>-";
temp_str
+=""
temp_str
+="<input type="Button" value=">>" onclick="change_date(1,1)" onmouseover="getlayerfocus()" style="color: #000099; background-color: #BFBFBF; cursor: hand">";

temp_str
+="</td></tr><tr><td onmouseover="overcolor(this)">"
temp_str
+="<font color=red>日</font></td><td>";temp_str+="一</td><td>"; temp_str+="二</td><td>"; temp_str+="三</td><td>"
temp_str
+="四</td><td>";temp_str+="五</td><td>"; temp_str+="六</td></tr>";
for (i=1 ;i<=6 ;i++)
...{
temp_str
+="<tr>";
for(j=1;j<=7;j++)...{
temp_str
+="<td name="c"+i+"_"+j+""id="c"+i+"_"+j+"" style="CURSOR: hand" style="COLOR:#000000" language="javascript" onmouseover="overcolor(this)" onmouseout="outcolor(this)" onclick="td_click(this)">?</td>"
}

temp_str
+="</tr>" 
}

temp_str
+="</td></tr></table>";
window.cele_date.innerHTML
=temp_str;
}

function set_cele_date(year,month)
...{
var i,j,p,k
var nd=new Date(year,month-1,1);
event.cancelBubble
=true;
cele_date_year.value
=year;
cele_date_month.value
=month; 
k
=nd.getDay()-1
var temp;
for (i=1;i<=6;i++)
for(j=1;j<=7;j++)
...{
eval(
"c"+i+"_"+j+".innerHTML=""");
eval(
"c"+i+"_"+j+".bgColor="#DDDDDD"");
eval(
"c"+i+"_"+j+".style.cursor="hand"");
}

while(month-1==nd.getMonth())
...{ j=(nd.getDay() +1);
p
=parseInt((nd.getDate()+k) / 7)+1;
eval(
"c"+p+"_"+j+".innerHTML="+"""+nd.getDate()+""");
if ((nd.getDate()==today.getDate())&&(cele_date_month.value==today.getMonth()+1)&&(cele_date_year.value==today.getYear()))...{
eval(
"c"+p+"_"+j+".bgColor="#EFFB64"");
}

if (nd>date_end || nd<date_start)
...{
eval(
"c"+p+"_"+j+".bgColor="#FF9999"");
eval(
"c"+p+"_"+j+".style.cursor="text"");
}

nd
=new Date(nd.valueOf() + 86400000)
}

}

//

//s_object:点击的对象;d_start-d_end有效的时间区段;需要存放值的控件;
function show_cele_date(eP,d_start,d_end,t_object)
...{
window.cele_date.style.display
="";
window.cele_date.style.zIndex
=99
var s,cur_d
var eT = eP.offsetTop; 
var eH = eP.offsetHeight+eT; 
var dH = window.cele_date.style.pixelHeight; 
var sT = document.body.scrollTop; 
var sL = document.body.scrollLeft; 
event.cancelBubble
=true;
window.cele_date.style.posLeft 
= event.clientX-event.offsetX+sL-5
window.cele_date.style.posTop 
= event.clientY-event.offsetY+eH+sT-5;
if (window.cele_date.style.posLeft+window.cele_date.clientWidth>document.body.clientWidth) window.cele_date.style.posLeft+=eP.offsetWidth-window.cele_date.clientWidth;
if (d_start!="")...{
if (d_start=="today")...{
date_start
=new Date(today.getYear(),today.getMonth(),today.getDate());
}
else...{
s
=d_start.split(separator);
date_start
=new Date(s[0],s[1]-1,s[2]);
}

}
else...{
date_start
=new Date(1900,1,1);
}


if (d_end!="")...{
s
=d_end.split(separator);
date_end
=new Date(s[0],s[1]-1,s[2]);
}
else...{
date_end
=new Date(3000,1,1);
}


g_object
=t_object

cur_d
=new Date()
set_cele_date(cur_d.getYear(),cur_d.getMonth()
+1);
window.cele_date.style.display
="block";

window.cele_date.focus();

}

function td_click(t_object)
...{
var t_d
if (parseInt(t_object.innerHTML,10)>=1 && parseInt(t_object.innerHTML,10)<=31 ) 
...{ t_d=new Date(cele_date_year.value,cele_date_month.value-1,t_object.innerHTML)
if (t_d<=date_end && t_d>=date_start)
...{
var year = cele_date_year.value;
var month = cele_date_month.value;
var day = t_object.innerHTML;
if (parseInt(month)<10) month = "0" + month;
if (parseInt(day)<10) day = "0" + day;

g_object.value
=year+separator+month+separator+day;
window.cele_date.style.display
="none";}
;
}


}

function h_cele_date()
...{
window.cele_date.style.display
="none";
}


function overcolor(obj)
...{
if (obj.style.cursor=="hand") obj.style.color = "#FFFFFF";

inover
=true;
window.cele_date.focus();

}


function outcolor(obj)
...{
obj.style.color 
= "#000000";
inover
=false;

}


function getNow(o)...{
var Stamp=new Date();
var year = Stamp.getYear();
var month = Stamp.getMonth()+1;
var day = Stamp.getDate();
if(month<10)...{
month
="0"+month;
}

if(day<10)...{
day
="0"+day;
}

o.value
=year+separator+month+separator+day;
}


function hilayer()
...{
if (inover==false)
...{
var lay=document.all.cele_date;
lay.style.display
="none";
}

}

function getlayerfocus()
...{
inover
=true;
}

function lostlayerfocus()
...{
inover
=false;
}

init();
//日历结束

html文件(testdate.html):

<html>
<head>
<!-- 引入JS文件-->
<SCRIPT src="birthday.js"></SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>datetest</title>
</head>

<body>
<form name="form1" method="post" action="">
<table width="500" border="0" align="center">
<tr>
<td>
<div align="center">
时间:
<input type="text" name="txtdate" onfocus="show_cele_date(txtdate,'','',txtdate)"><!-- 调用函数 -->
</div></td>
</tr>
</table>
</form>
</body>
</html>

Easyui datebox单击文本框显示日期选择 eayui版本1.4.5

EasyUI的日期框是点击后面的按钮才打开日历的  如图  现在我想点击白色的文本框直接弹出日历。在网上找到的版本都是1.3的。所有我自己摸索了一下。 打开jquery源码 jQuery.easy...
  • Lidong_USMC
  • Lidong_USMC
  • 2017年05月24日 14:34
  • 437

点击Input框弹出日期选项

测试地址:http://down.admin5.com/demo/code_pop/18/1299/ 效果图片: 后台代码: 点击text文本框弹出日期选择器 body{m...
  • a364416036
  • a364416036
  • 2016年08月03日 08:58
  • 6697

jquery实现input点击输入框弹出日期

这个功能使用到了jQuery中的focus函数, 所需的js, /* * My97 DatePicker 4.8 Beta1 * License: http://www.my97.net/dp/l...
  • wojiaohuangyu
  • wojiaohuangyu
  • 2016年12月20日 22:02
  • 2183

Easyui datebox单击文本框显示日期选择 eayui版本1.4.3

Easyui默认是点击文本框后面的图标显示日期。我想单击文本框就显示日期选择框,但网上没找到针对easyui 1.4.3的 只有针对easyui 1.3.6的。没办法只能自力更生咯。...
  • caonuoqi
  • caonuoqi
  • 2016年06月20日 17:23
  • 1468

asp.net控件与JavaScript实现TextBox获取焦点时出现日历

asp.net控件与JavaScript实现TextBox获取焦点时出现日历 效果:当光标落入TextBox中,其下出现日历.日历是asp.net 的日历控件. (1)aspx中代码: Ja...
  • u012709815
  • u012709815
  • 2014年03月28日 00:12
  • 1035

安卓点击EditText,弹出日期选择界面,选择日期,返回给EditText

activity_main.xml布局文件里面,就是一个EditText控件 RelativeLayout xmlns:android="http://schemas.android.com/...
  • u010698072
  • u010698072
  • 2016年06月10日 11:19
  • 2630

js控制点击text 框时弹出选择城市的效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> js te...
  • dsp_daiyujie
  • dsp_daiyujie
  • 2013年02月28日 15:48
  • 3683

点击EditText 弹出日期选择器DatePickerDialog

android 点击EditText 弹出日期选择器DatePickerDialog Android手机开发:EditText+DatePicker带日期选择器的编辑框 关于android:foc...
  • xx326664162
  • xx326664162
  • 2016年12月02日 16:29
  • 3083

jQuery日期弹出选择框Datepicker效果

无论你是一个机票在线预定网站设计师,还是一个工程任务管理者,抑或在你的注册表单上有个生日填写项目;本文即将提到的日历日期选择弹出窗口都将帮助你简化用户操作,提高网站的用户体验和易用性。 教程目标:教...
  • CsethCRM
  • CsethCRM
  • 2014年10月28日 12:58
  • 4217

点击文本框弹出日期选择输入日期代码

一款非常不错的日期选择效果 function HS_DateAdd(interval,number,date){ number = parseInt(number); if (typeo...
  • u011580165
  • u011580165
  • 2013年08月05日 13:26
  • 1038
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:点击文本框弹出日期
举报原因:
原因补充:

(最多只允许输入30个字)