`
tiandirensoon
  • 浏览: 591805 次
文章分类
社区版块
存档分类
最新评论

好多Javascript日期选择器呀--2

 
阅读更多

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"<ahref="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<htmlxmlns="<ahref="http://www.w3.org/1999/xhtml"target="_blank">http://www.w3.org/1999/xhtml</a>">
<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"];
varnewDate=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;
varmonthOut=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)hoverEle.className=hoverEle.className.replace(/hoverEle?/,'');
hoverEle=ele;
ele.className='hoverEle'+ele.className;
}else{
if(hoverEle){
hoverEle.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;
currentDayZero=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>
<div><inputtype='text'id='date2'/><inputtype='button'id='for_date2'value='date'onclick='showCalender(this)'/></div>
<pid='output'></p>
</body>
</html>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics