JS代码--选择日期

时间:2021-04-14 18:07:29
JS代码--选择日期< script language = javascript >
JS代码--选择日期
var  DS_x,DS_y;
JS代码--选择日期
JS代码--选择日期
function  dateSelector()   // 构造dateSelector对象,用来实现一个日历形式的日期输入框。
JS代码--选择日期
{
JS代码--选择日期  
var  myDate = new  Date();
JS代码--选择日期  
this .year = myDate.getFullYear();   // 定义year属性,年份,默认值为当前系统年份。
JS代码--选择日期
   this .month = myDate.getMonth() + 1 ;   // 定义month属性,月份,默认值为当前系统月份。
JS代码--选择日期
   this .date = myDate.getDate();   // 定义date属性,日,默认值为当前系统的日。
JS代码--选择日期
   this .inputName = '';   // 定义inputName属性,即输入框的name,默认值为空。注意:在同一页中出现多个日期输入框,不能有重复的name!
JS代码--选择日期
   this .display = display;   // 定义display方法,用来显示日期输入框。
JS代码--选择日期
}
JS代码--选择日期
JS代码--选择日期
function  display()   // 定义dateSelector的display方法,它将实现一个日历形式的日期选择框。
JS代码--选择日期
{
JS代码--选择日期  
var  week = new  Array('日','一','二','三','四','五','六');
JS代码--选择日期
JS代码--选择日期  document.write(
" <style type=text/css> " );
JS代码--选择日期  document.write(
"   .ds_font td,span  { font: normal 12px 宋体; color: #000000; } " );
JS代码--选择日期  document.write(
"   .ds_border  { border: 1px solid #000000; cursor: hand; background-color: #DDDDDD } " );
JS代码--选择日期  document.write(
"   .ds_border2  { border: 1px solid #000000; cursor: hand; background-color: #DDDDDD } " );
JS代码--选择日期  document.write(
" </style> " );
JS代码--选择日期
JS代码--选择日期  document.write(
" <input style='text-align:center;' id='DS_ " + this .inputName + " ' name=' " + this .inputName + " ' value=' " + this .year + " - " + this .month + " - " + this .date + " ' title=双击可进行编缉 ondblclick='this.readOnly=false;this.focus()' onblur='this.readOnly=true' readonly> " );
JS代码--选择日期  document.write(
" <button style='width:60px;height:18px;font-size:12px;margin:1px;border:1px solid #A4B3C8;background-color:#DFE7EF;' type=button onclick=this.nextSibling.style.display='block' onfocus=this.blur()>选择日期</button> " );
JS代码--选择日期
JS代码--选择日期  document.write(
" <div style='position:absolute;display:none;text-align:center;width:0px;height:0px;overflow:visible' onselectstart='return false;'> " );
JS代码--选择日期  document.write(
"   <div style='position:absolute;left:-60px;top:20px;width:142px;height:165px;background-color:#F6F6F6;border:1px solid #245B7D;' class=ds_font> " );
JS代码--选择日期  document.write(
"     <table cellpadding=0 cellspacing=1 width=140 height=20 bgcolor=#CEDAE7 onmousedown='DS_x=event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='dsMove(this.parentNode)' style='cursor:move;'> " );
JS代码--选择日期  document.write(
"       <tr align=center> " );
JS代码--选择日期  document.write(
"         <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=subYear(this) title='减小年份'>&lt;&lt;</td> " );
JS代码--选择日期  document.write(
"         <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=subMonth(this) title='减小月份'>&lt;</td> " );
JS代码--选择日期  document.write(
"         <td width=52%><b> " + this .year + " </b><b>年</b><b> " + this .month + " </b><b>月</b></td> " );
JS代码--选择日期  document.write(
"         <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=addMonth(this) title='增加月份'>&gt;</td> " );
JS代码--选择日期  document.write(
"         <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=addYear(this) title='增加年份'>&gt;&gt;</td> " );
JS代码--选择日期  document.write(
"       </tr> " );
JS代码--选择日期  document.write(
"     </table> " );
JS代码--选择日期
JS代码--选择日期  document.write(
"     <table cellpadding=0 cellspacing=0 width=140 height=20 onmousedown='DS_x=event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='dsMove(this.parentNode)' style='cursor:move;'> " );
JS代码--选择日期  document.write(
"       <tr align=center> " );
JS代码--选择日期  
for (i = 0 ;i < 7 ;i ++ )
JS代码--选择日期    document.write(
"       <td> " + week[i] + " </td> " );
JS代码--选择日期  document.write(
"       </tr> " );
JS代码--选择日期  document.write(
"     </table> " );
JS代码--选择日期
JS代码--选择日期  document.write(
"     <table cellpadding=0 cellspacing=2 width=140 bgcolor=#EEEEEE> " );
JS代码--选择日期  
for (i = 0 ;i < 6 ;i ++ )
JS代码--选择日期  {
JS代码--选择日期    document.write(
"     <tr align=center> " );
JS代码--选择日期    
for (j = 0 ;j < 7 ;j ++ )
JS代码--选择日期      document.write(
"     <td width=10% height=16 onmouseover=if(this.innerText!=''&&this.className!='ds_border2')this.className='ds_border' onmouseout=if(this.className!='ds_border2')this.className='' onclick=getValue(this,document.all('DS_ " + this .inputName + " '))></td> " );
JS代码--选择日期    document.write(
"     </tr> " );
JS代码--选择日期  }
JS代码--选择日期  document.write(
"     </table> " );
JS代码--选择日期
JS代码--选择日期  document.write(
"     <span style=cursor:hand onclick=this.parentNode.parentNode.style.display='none'>【关闭】</span> " );
JS代码--选择日期  document.write(
"   </div> " );
JS代码--选择日期  document.write(
" </div> " );
JS代码--选择日期
JS代码--选择日期  dateShow(document.all(
" DS_ " + this .inputName).nextSibling.nextSibling.childNodes[ 0 ].childNodes[ 2 ], this .year, this .month)
JS代码--选择日期}
JS代码--选择日期
JS代码--选择日期
function  subYear(obj)   // 减小年份
JS代码--选择日期
{
JS代码--选择日期  
var  myObj = obj.parentNode.parentNode.parentNode.cells[ 2 ].childNodes;
JS代码--选择日期  myObj[
0 ].innerHTML = eval(myObj[ 0 ].innerHTML) - 1 ;
JS代码--选择日期  dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[
0 ].innerHTML),eval(myObj[ 2 ].innerHTML))
JS代码--选择日期}
JS代码--选择日期
JS代码--选择日期
function  addYear(obj)   // 增加年份
JS代码--选择日期
{
JS代码--选择日期  
var  myObj = obj.parentNode.parentNode.parentNode.cells[ 2 ].childNodes;
JS代码--选择日期  myObj[
0 ].innerHTML = eval(myObj[ 0 ].innerHTML) + 1 ;
JS代码--选择日期  dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[
0 ].innerHTML),eval(myObj[ 2 ].innerHTML))
JS代码--选择日期}
JS代码--选择日期
JS代码--选择日期
function  subMonth(obj)   // 减小月份
JS代码--选择日期
{
JS代码--选择日期  
var  myObj = obj.parentNode.parentNode.parentNode.cells[ 2 ].childNodes;
JS代码--选择日期  
var  month = eval(myObj[ 2 ].innerHTML) - 1 ;
JS代码--选择日期  
if (month == 0 )
JS代码--选择日期  {
JS代码--选择日期    month
= 12 ;
JS代码--选择日期    subYear(obj);
JS代码--选择日期  }
JS代码--选择日期  myObj[
2 ].innerHTML = month;
JS代码--选择日期  dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[
0 ].innerHTML),eval(myObj[ 2 ].innerHTML))
JS代码--选择日期}
JS代码--选择日期
JS代码--选择日期
function  addMonth(obj)   // 增加月份
JS代码--选择日期
{
JS代码--选择日期  
var  myObj = obj.parentNode.parentNode.parentNode.cells[ 2 ].childNodes;
JS代码--选择日期  
var  month = eval(myObj[ 2 ].innerHTML) + 1 ;
JS代码--选择日期  
if (month == 13 )
JS代码--选择日期  {
JS代码--选择日期    month
= 1 ;
JS代码--选择日期    addYear(obj);
JS代码--选择日期  }
JS代码--选择日期  myObj[
2 ].innerHTML = month;
JS代码--选择日期  dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[
0 ].innerHTML),eval(myObj[ 2 ].innerHTML))
JS代码--选择日期}
JS代码--选择日期
JS代码--选择日期
function  dateShow(obj,year,month)   // 显示各月份的日
JS代码--选择日期
{
JS代码--选择日期  
var  myDate = new  Date(year,month - 1 , 1 );
JS代码--选择日期  
var  today = new  Date();
JS代码--选择日期  
var  day = myDate.getDay();
JS代码--选择日期  
var  selectDate = obj.parentNode.parentNode.previousSibling.previousSibling.value.split(' - ');
JS代码--选择日期  
var  length;
JS代码--选择日期  
switch (month)
JS代码--选择日期  {
JS代码--选择日期    
case   1 :
JS代码--选择日期    
case   3 :
JS代码--选择日期    
case   5 :
JS代码--选择日期    
case   7 :
JS代码--选择日期    
case   8 :
JS代码--选择日期    
case   10 :
JS代码--选择日期    
case   12 :
JS代码--选择日期      length
= 31 ;
JS代码--选择日期      
break ;
JS代码--选择日期    
case   4 :
JS代码--选择日期    
case   6 :
JS代码--选择日期    
case   9 :
JS代码--选择日期    
case   11 :
JS代码--选择日期      length
= 30 ;
JS代码--选择日期      
break ;
JS代码--选择日期    
case   2 :
JS代码--选择日期      
if ((year % 4 == 0 ) && (year % 100 != 0 ) || (year % 400 == 0 ))
JS代码--选择日期        length
= 29 ;
JS代码--选择日期      
else
JS代码--选择日期        length
= 28 ;
JS代码--选择日期  }
JS代码--选择日期  
for (i = 0 ;i < obj.cells.length;i ++ )
JS代码--选择日期  {
JS代码--选择日期    obj.cells[i].innerHTML
= '';
JS代码--选择日期    obj.cells[i].style.color
= '';
JS代码--选择日期    obj.cells[i].className
= '';
JS代码--选择日期  }
JS代码--选择日期  
for (i = 0 ;i < length;i ++ )
JS代码--选择日期  {
JS代码--选择日期    obj.cells[i
+ day].innerHTML = (i + 1 );
JS代码--选择日期    
if (year == today.getFullYear() && (month - 1 ) == today.getMonth() && (i + 1 ) == today.getDate())
JS代码--选择日期      obj.cells[i
+ day].style.color = 'red';
JS代码--选择日期    
if (year == eval(selectDate[ 0 ]) && month == eval(selectDate[ 1 ]) && (i + 1 ) == eval(selectDate[ 2 ]))
JS代码--选择日期      obj.cells[i
+ day].className = 'ds_border2';
JS代码--选择日期  }
JS代码--选择日期}
JS代码--选择日期
JS代码--选择日期
function  getValue(obj,inputObj)   // 把选择的日期传给输入框
JS代码--选择日期
{
JS代码--选择日期  
var  myObj = inputObj.nextSibling.nextSibling.childNodes[ 0 ].childNodes[ 0 ].cells[ 2 ].childNodes;
JS代码--选择日期  
if (obj.innerHTML)
JS代码--选择日期    inputObj.value
= myObj[ 0 ].innerHTML + " - " + myObj[ 2 ].innerHTML + " - " + obj.innerHTML;
JS代码--选择日期  inputObj.nextSibling.nextSibling.style.display
= 'none';
JS代码--选择日期  
for (i = 0 ;i < obj.parentNode.parentNode.parentNode.cells.length;i ++ )
JS代码--选择日期    obj.parentNode.parentNode.parentNode.cells[i].className
= '';
JS代码--选择日期  obj.className
= 'ds_border2'
JS代码--选择日期}
JS代码--选择日期
JS代码--选择日期
function  dsMove(obj)   // 实现层的拖移
JS代码--选择日期
{
JS代码--选择日期  
if (event.button == 1 )
JS代码--选择日期  {
JS代码--选择日期    
var  X = obj.clientLeft;
JS代码--选择日期    
var  Y = obj.clientTop;
JS代码--选择日期    obj.style.pixelLeft
= X + (event.x - DS_x);
JS代码--选择日期    obj.style.pixelTop
= Y + (event.y - DS_y);
JS代码--选择日期  }
JS代码--选择日期}
JS代码--选择日期
</ script >
JS代码--选择日期
JS代码--选择日期
< script language = javascript >
JS代码--选择日期  
var  myDate = new  dateSelector();
JS代码--选择日期  myDate.year
-- ;
JS代码--选择日期  myDate.inputName
= 'start_date';   // 注意这里设置输入框的name,同一页中日期输入框,不能出现重复的name。
JS代码--选择日期
  myDate.display();
JS代码--选择日期
</ script >
JS代码--选择日期
& nbsp;到
JS代码--选择日期
< script language = javascript >
JS代码--选择日期  myDate.year
++ ;
JS代码--选择日期  myDate.inputName
= 'end_date';   // 注意这里设置输入框的name,同一页中的日期输入框,不能出现重复的name。
JS代码--选择日期
  myDate.display();
JS代码--选择日期
</ script >