<script?language=javascript>
var?DS_x,DS_y;

function?dateSelector()??//構造dateSelector對象，用來實現一個日歷形式的日期輸入框。
{
??var?myDate=new?Date();
??this.year=myDate.getFullYear();??//定義year屬性，年份，默認值為當前系統年份。
??this.month=myDate.getMonth()+1;??//定義month屬性，月份，默認值為當前系統月份。
??this.date=myDate.getDate();??//定義date屬性，日，默認值為當前系統的日。
??this.inputName='';??//定義inputName屬性，即輸入框的name，默認值為空。注意：在同一頁中出現多個日期輸入框，不能有重復的name！
??this.display=display;??//定義display方法，用來顯示日期輸入框。
}

function?display()??//定義dateSelector的display方法，它將實現一個日歷形式的日期選擇框。
{
??var?week=new?Array('日','一','二','三','四','五','六');

??document.write("<style?type=text/css>");
??document.write("??.ds_font?td,span??{?font:?normal?12px?宋體;?color:?#000000;?}");
??document.write("??.ds_border??{?border:?1px?solid?#000000;?cursor:?hand;?background-color:?#DDDDDD?}");
??document.write("??.ds_border2??{?border:?1px?solid?#000000;?cursor:?hand;?background-color:?#DDDDDD?}");
??document.write("</style>");

??document.write("<input?style='text-align:center;'?id='DS_"+this.inputName+"'?name='"+this.inputName+"'?value='"+this.year+"-"+this.month+"-"+this.date+"'?title=雙擊可進行編緝?οndblclick='this.readOnly=false;this.focus()'?οnblur='this.readOnly=true'?readonly>");
??document.write("<button?style='width:60px;height:18px;font-size:12px;margin:1px;border:1px?solid?#A4B3C8;background-color:#DFE7EF;'?type=button?οnclick=this.nextSibling.style.display='block'?οnfοcus=this.blur()>選擇日期</button>");

??document.write("<div?style='position:absolute;display:none;text-align:center;width:0px;height:0px;overflow:visible'?onselectstart='return?false;'>");
??document.write("??<div?style='position:absolute;left:-60px;top:20px;width:142px;height:165px;background-color:#F6F6F6;border:1px?solid?#245B7D;'?class=ds_font>");
??document.write("????<table?cellpadding=0?cellspacing=1?width=140?height=20?bgcolor=#CEDAE7?οnmοusedοwn='DS_x=event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style.pixelTop;setCapture();'?οnmοuseup='releaseCapture();'?οnmοusemοve='dsMove(this.parentNode)'?style='cursor:move;'>");
??document.write("??????<tr?align=center>");
??document.write("????????<td?width=12%?οnmοuseοver=this.className='ds_border'?οnmοuseοut=this.className=''?οnclick=subYear(this)?title='減小年份'><<</td>");
??document.write("????????<td?width=12%?οnmοuseοver=this.className='ds_border'?οnmοuseοut=this.className=''?οnclick=subMonth(this)?title='減小月份'><</td>");
??document.write("????????<td?width=52%><b>"+this.year+"</b><b>年</b><b>"+this.month+"</b><b>月</b></td>");
??document.write("????????<td?width=12%?οnmοuseοver=this.className='ds_border'?οnmοuseοut=this.className=''?οnclick=addMonth(this)?title='增加月份'>></td>");
??document.write("????????<td?width=12%?οnmοuseοver=this.className='ds_border'?οnmοuseοut=this.className=''?οnclick=addYear(this)?title='增加年份'>>></td>");
??document.write("??????</tr>");
??document.write("????</table>");

??document.write("????<table?cellpadding=0?cellspacing=0?width=140?height=20?οnmοusedοwn='DS_x=event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style.pixelTop;setCapture();'?οnmοuseup='releaseCapture();'?οnmοusemοve='dsMove(this.parentNode)'?style='cursor:move;'>");
??document.write("??????<tr?align=center>");
??for(i=0;i<7;i++)
????document.write("??????<td>"+week[i]+"</td>");
??document.write("??????</tr>");
??document.write("????</table>");

??document.write("????<table?cellpadding=0?cellspacing=2?width=140?bgcolor=#EEEEEE>");
??for(i=0;i<6;i++)
??{
????document.write("????<tr?align=center>");
????for(j=0;j<7;j++)
??????document.write("????<td?width=10%?height=16?οnmοuseοver=if(this.innerText!=''&&this.className!='ds_border2')this.className='ds_border'?οnmοuseοut=if(this.className!='ds_border2')this.className=''?οnclick=getvalue(this,document.all('DS_"+this.inputName+"'))></td>");
????document.write("????</tr>");
??}
??document.write("????</table>");

??document.write("????<span?style=cursor:hand?οnclick=this.parentNode.parentNode.style.display='none'>【關閉】</span>");
??document.write("??</div>");
??document.write("</div>");

??dateShow(document.all("DS_"+this.inputName).nextSibling.nextSibling.childNodes[0].childNodes[2],this.year,this.month)
}

function?subYear(obj)??//減小年份
{
??var?myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
??myObj[0].innerHTML=eval(myObj[0].innerHTML)-1;
??dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
}

function?addYear(obj)??//增加年份
{
??var?myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
??myObj[0].innerHTML=eval(myObj[0].innerHTML)+1;
??dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
}

function?subMonth(obj)??//減小月份
{
??var?myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
??var?month=eval(myObj[2].innerHTML)-1;
??if(month==0)
??{
????month=12;
????subYear(obj);
??}
??myObj[2].innerHTML=month;
??dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
}

function?addMonth(obj)??//增加月份
{
??var?myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
??var?month=eval(myObj[2].innerHTML)+1;
??if(month==13)
??{
????month=1;
????addYear(obj);
??}
??myObj[2].innerHTML=month;
??dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
}

function?dateShow(obj,year,month)??//顯示各月份的日
{
??var?myDate=new?Date(year,month-1,1);
??var?today=new?Date();
??var?day=myDate.getDay();
??var?selectDate=obj.parentNode.parentNode.previousSibling.previousSibling.value.split('-');
??var?length;
??switch(month)
??{
????case?1:
????case?3:
????case?5:
????case?7:
????case?8:
????case?10:
????case?12:
??????length=31;
??????break;
????case?4:
????case?6:
????case?9:
????case?11:
??????length=30;
??????break;
????case?2:
??????if((year%4==0)&&(year%100!=0)||(year%400==0))
????????length=29;
??????else
????????length=28;
??}
??for(i=0;i<obj.cells.length;i++)
??{
????obj.cells[i].innerHTML='';
????obj.cells[i].style.color='';
????obj.cells[i].className='';
??}
??for(i=0;i<length;i++)
??{
????obj.cells[i+day].innerHTML=(i+1);
????if(year==today.getFullYear()&&(month-1)==today.getMonth()&&(i+1)==today.getDate())
??????obj.cells[i+day].style.color='red';
????if(year==eval(selectDate[0])&&month==eval(selectDate[1])&&(i+1)==eval(selectDate[2]))
??????obj.cells[i+day].className='ds_border2';
??}
}

function?getvalue(obj,inputObj)??//把選擇的日期傳給輸入框
{
??var?myObj=inputObj.nextSibling.nextSibling.childNodes[0].childNodes[0].cells[2].childNodes;
??if(obj.innerHTML)
????inputObj.value=myObj[0].innerHTML+"-"+myObj[2].innerHTML+"-"+obj.innerHTML;
??inputObj.nextSibling.nextSibling.style.display='none';
??for(i=0;i<obj.parentNode.parentNode.parentNode.cells.length;i++)
????obj.parentNode.parentNode.parentNode.cells[i].className='';
??obj.className='ds_border2'
}

function?dsMove(obj)??//實現層的拖移
{
??if(event.button==1)
??{
????var?X=obj.clientLeft;
????var?Y=obj.clientTop;
????obj.style.pixelLeft=X+(event.x-DS_x);
????obj.style.pixelTop=Y+(event.y-DS_y);
??}
}
</script>
從
<script?language=javascript>
??var?myDate=new?dateSelector();
??myDate.year--;
??myDate.inputName='start_date';??//注意這里設置輸入框的name，同一頁中日期輸入框，不能出現重復的name。
??myDate.display();
</script>

?

?

總結

以上是生活随笔為你收集整理的好多Javascript日期选择器呀--1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。