在做項目的時候遇到了對日期的特殊要求，發現要找一款靈活的簡單日曆控制項真難。功夫不負有心人，我在網上淘了一個，分享給大家，這個不是我寫的，但這個寫的很簡單，可定製性相當高，對於日曆有特殊需要的pg們來看一看吧。好像是說月影前輩寫的，感謝函月影前輩，原文章找不到了。代碼大致如下，我只換了一下輸出格式和漢字顯示。。。
<!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><title>calender select</title><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><style type='text/css'>body { font-family:"Lucida sans unicode", 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:3px solid #ccc; padding:10px; z-index:10; }#control { text-align:center; margin:0 0 5px 0; }#control select { font-family:"Lucida sans unicode", sans-serif; font-size:11px; margin:0 5px; vertical-align:middle; }#calender .controlPlus { padding:0 5px; text-decoration:none; color:#333; }#calender table { empty-cells: show; width:100%; font-size:11px; table-layout:fixed; }#calender .weekdays td{ text-align:right; padding:1px 5px 1px 1px; color:#333; }#calender .week td { text-align:right; cursor:pointer; border:1px solid #fff; padding:1px 4px 1px 0; }#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><script type="text/javascript"> var allMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var allNameOfWeekDays=["星期一","星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]; var allNameOfMonths=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]; var newDate=new Date(); var yearZero=newDate.getFullYear(); var monthZero=newDate.getMonth(); var day=newDate.getDate(); var currentDay=0, currentDayZero=0; var month=monthZero, year=yearZero; var yearMin=2000, yearMax=2010; var target=''; var hoverEle=false; function setTarget(e){ if(e) return e.target; if(event) return event.srcElement; } function newElement(type, attrs, content, toNode) { var ele=document.createElement(type); if(attrs) { for(var i=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); return ele; } function setMonth(ele){month=parseInt(ele.value);calender()} function setYear(ele){year=parseInt(ele.value);calender()} function setValue(ele) { if(ele.parentNode.className=='week' && ele.firstChild){ var dayOut=ele.firstChild.nodeValue; if(dayOut < 10) dayOut='0'+dayOut; var monthOut=month+1; if(monthOut < 10) monthOut='0'+monthOut; //target.value=dayOut+'.'+monthOut+'.'+year;target.value = year + "-" + monthOut + "-" + dayOut; removeCalender(); } } function removeCalender() { var parentEle=document.getElementById("calender"); while(parentEle.firstChild) parentEle.removeChild(parentEle.firstChild); document.getElementById('basis').parentNode.removeChild(document.getElementById('basis')); } function calender() { var parentEle=document.getElementById("calender"); parentEle.onmouseover=function(e) { var ele=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); function check(){ if(year%4==0&&(year%100!=0||year%400==0))allMonth[1]=29; else allMonth[1]=28; } function addClass (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(); var control=newElement('p',[['id','control',1]],false,parentEle); var controlPlus=newElement('a', [['href','javascript:month--;calender()',1],['className','controlPlus',1]], '<', control); var select=newElement('select', [['onchange',function(){setMonth(this)}]], false, control); for(var i=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(var i=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-new Date(year,month,1).getDay(); if(currentDay > 0) currentDay-=7; currentDayZero=currentDay; var newMonth=newElement('table',[['cellSpacing',0,1],['onclick',function(e){setValue(setTarget(e))}]], false, parentEle); var newMonthBody=newElement('tbody', false, false, newMonth); var tr=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++){ var currentClass=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)}; } } } function showCalender(ele) { if(document.getElementById('basis')) { removeCalender() } else { target=document.getElementById(ele.id.replace(/for_/,'')); var basis=ele.parentNode.insertBefore(document.createElement('div'),ele); basis.id='basis'; newElement('div', [['id','calender',1]], false, basis); calender(); } }</script></head><body ><div><input type='text' id='date1' /><input type='button' id='for_date1' value='date' onclick='showCalender(this)' /></div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
