javascript日期选择控件

最新推荐文章于 2024-07-15 02:39:56 发布
iteye_3224
最新推荐文章于 2024-07-15 02:39:56 发布
阅读量103
点赞数
分类专栏： javascript 文章标签： JavaScript CSS HTML ViewUI
javascript 专栏收录该内容
85 篇文章 0 订阅
订阅专栏
 
  <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> 
 