javascript日期选择控件

txf2004

浏览: 7041017 次
性别:
来自: 上海

最近访客更多访客>>

east_java

u012363178

wangyy

GDGZWQZ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript CSS HTML

<html> 

<head> 

<title>calenderselect</title> 

<metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-1"/> 

<styletype='text/css'> 
body{
font-family:"Lucidasansunicode",sans-serif;
font-size:12px;
margin:0;
padding:0;
height:100%;
}
#basis{
display:inline;
position:relative;
}
#calender{
position:absolute;
top:30px;
left:0;
width:220px;
background-color:#fff;
border:3pxsolid#ccc;
padding:10px;
z-index:10;
}
#control{
text-align:center;
margin:005px0;
}
#controlselect{
font-family:"Lucidasansunicode",sans-serif;
font-size:11px;
margin:05px;
vertical-align:middle;
}
#calender.controlPlus{
padding:05px;
text-decoration:none;
color:#333;
}
#calendertable{
empty-cells:show;
width:100%;
font-size:11px;
table-layout:fixed;
}
#calender.weekdaystd{
text-align:right;
padding:1px5px1px1px;
color:#333;
}
#calender.weektd{
text-align:right;
cursor:pointer;
border:1pxsolid#fff;
padding:1px4px1px0;
}
#calender.week.today{
background-color:#ccf;
border-color:#ccf;
}
#calender.week.holiday{
font-weight:bold;
}
#calender.week.hoverEle{
border-color:#666;
background-color:#99f;
color:#000;
}

</style> 

<scripttype="text/javascript"> 

varallMonth=[31,28,31,30,31,30,31,31,30,31,30,31]; 

varallNameOfWeekDays=["Mo","Di","Mi","Do","Fr","Sa","So"]; 

varallNameOfMonths=["Januar","Februar","M?rz","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"]; 

varnewnewDate=newDate(); 

varyearZero=newDate.getFullYear(); 

varmonthZero=newDate.getMonth(); 

varday=newDate.getDate(); 

varcurrentDay=0,currentDayZero=0; 

varmonth=monthZero,year=yearZero; 

varyearMin=2000,yearMax=2010; 

vartarget=''; 

varhoverEle=false; 
functionsetTarget(e){
if(e)returne.target;
if(event)returnevent.srcElement;
}
functionnewElement(type,attrs,content,toNode){

varele=document.createElement(type); 
if(attrs){

for(vari=0;i<attrs.length;i++){ 
eval('ele.'+attrs[i][0]+(attrs[i][2]?'=\u0027':'=')+attrs[i][1]+(attrs[i][2]?'\u0027':''));
}
}
if(content)ele.appendChild(document.createTextNode(content));
if(toNode)toNode.appendChild(ele);
returnele;
}

functionsetMonth(ele){month=parseInt(ele.value);calender()} 

functionsetYear(ele){year=parseInt(ele.value);calender()} 
functionsetValue(ele){

if(ele.parentNode.className=='week'&&ele.firstChild){ 

vardayOut=ele.firstChild.nodeValue; 

if(dayOut<10)dayOut='0'+dayOut; 

varmonthmonthOut=month+1; 

if(monthOut<10)monthOut='0'+monthOut; 

target.value=dayOut+'.'+monthOut+'.'+year; 
removeCalender();
}
}
functionremoveCalender(){

varparentEle=document.getElementById("calender"); 
while(parentEle.firstChild)parentEle.removeChild(parentEle.firstChild);
document.getElementById('basis').parentNode.removeChild(document.getElementById('basis'));
}
functioncalender(){

varparentEle=document.getElementById("calender"); 

parentEle.onmouseover=function(e){ 

varele=setTarget(e); 

if(ele.parentNode.className=='week'&&ele.firstChild&&ele!=hoverEle){ 

if(hoverEle)hoverElehoverEle.className=hoverEle.className.replace(/hoverEle?/,''); 

hoverEle=ele; 

ele.className='hoverEle'+ele.className; 
}else{
if(hoverEle){

hoverElehoverEle.className=hoverEle.className.replace(/hoverEle?/,''); 

hoverEle=false; 
}
}
}
while(parentEle.firstChild)parentEle.removeChild(parentEle.firstChild);
functioncheck(){

if(year%4==0&&(year%100!=0||year%400==0))allMonth[1]=29; 
elseallMonth[1]=28;
}

functionaddClass(name){if(!currentClass){currentClass=name}else{currentClass+=''+name}}; 

if(month<0){month+=12;year-=1} 

if(month>11){month-=12;year+=1} 

if(year==yearMax-1)yearMax+=1; 

if(year==yearMin)yearMin-=1; 
check();

varcontrol=newElement('p',[['id','control',1]],false,parentEle); 

varcontrolPlus=newElement('a',[['href','javascript:month--;calender()',1],['className','controlPlus',1]],'<',control); 

varselect=newElement('select',[['onchange',function(){setMonth(this)}]],false,control); 

for(vari=0;i<allNameOfMonths.length;i++)newElement('option',[['value',i,1]],allNameOfMonths[i],select); 

select.selectedIndex=month; 

select=newElement('select',[['onchange',function(){setYear(this)}]],false,control); 

for(vari=yearMin;i<yearMax;i++)newElement('option',[['value',i,1]],i,select); 

select.selectedIndex=year-yearMin; 

controlPlus=newElement('a',[['href','javascript:month++;calender()',1],['className','controlPlus',1]],'>',control); 
check();

currentDay=1-newDate(year,month,1).getDay(); 

if(currentDay>0)currentDay-=7; 

currentDaycurrentDayZero=currentDay; 

varnewMonth=newElement('table',[['cellSpacing',0,1],['onclick',function(e){setValue(setTarget(e))}]],false,parentEle); 

varnewMonthBody=newElement('tbody',false,false,newMonth); 

vartr=newElement('tr',[['className','head',1]],false,newMonthBody); 

tr=newElement('tr',[['className','weekdays',1]],false,newMonthBody); 

for(i=0;i<7;i++)td=newElement('td',false,allNameOfWeekDays[i],tr); 

tr=newElement('tr',[['className','week',1]],false,newMonthBody); 

for(i=0;i<allMonth[month]-currentDayZero;i++){ 

varcurrentClass=false; 
currentDay++;

if(currentDay==day&&month==monthZero&&year==yearZero)addClass('today'); 

if(currentDay<=0){ 

if(currentDayZero!=-7)td=newElement('td',false,false,tr); 
}
else{

if((currentDay-currentDayZero)%7==0)addClass('holiday'); 

td=newElement('td',(!currentClass?false:[['className',currentClass,1]]),currentDay,tr); 

if((currentDay-currentDayZero)%7==0)tr=newElement('tr',[['className','week',1]],false,newMonthBody); 
}

if(i==allMonth[month]-currentDayZero-1){ 
i++;

while(i%7!=0){i++;td=newElement('td',false,false,tr)}; 
}
}
}
functionshowCalender(ele){
if(document.getElementById('basis')){removeCalender()}
else{

target=document.getElementById(ele.id.replace(/for_/,'')); 

varbasis=ele.parentNode.insertBefore(document.createElement('div'),ele); 

basis.id='basis'; 
newElement('div',[['id','calender',1]],false,basis);
calender();
}
}

</script> 

</head> 

<body> 

<div><inputtype='text'id='date1'/><inputtype='button'id='for_date1'value='date'onclick='showCalender(this)'/></div> 

<p>sometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometextsometext</p> 

<div><inputtype='text'id='date2'/><inputtype='button'id='for_date2'value='date'onclick='showCalender(this)'/></div> 

<pid='output'></p> 

</body> 

</html> 

分享到：

PHP手册翻译日记[2] | 用css控制select样式

2008-12-14 01:54
浏览 1077
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript日期选择控件

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript日期选择控件

评论

发表评论

相关推荐

jQuery+Ajax+PHP+Mysql实现分页显示数据

Tab页界面，用jQuery及Ajax技术实现

自动提示结果

visibility和display区别

可放在网页旁边的导航菜单，点击向右边展开

图片加载loading...

iframe加载loading...

发一个选项卡动态增删的效果..

复选框问题,将选定的值在textarea显示

表格复选和复选变色效果

表格数据排序

检测密码强度

CNL Tree Menu Ver1.02无限级树形菜by CNLei枫岩

点击按钮，实现复制网址的代码

完全去除页面滚动条的方法

支持IE和火狐浏览器的加入收藏夹js代码

javascript实现换皮肤的一种思路

yiu简易网页调色板功能调用代码

table排序类,点击第一行标题可以排序

表格隔行换色+鼠标经过变色(ie6,ie7,ff)

最近访客更多访客>>