好多Javascript日期选择器呀 - C# - 编程文档

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<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=["Mo","Di", "Mi", "Do", "Fr", "Sa", "So"];
     var allNameOfMonths=["Januar","Februar","M?rz","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"];
     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;
               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>
<div><input type='text' id='date2' /><input type='button' id='for_date2' value='date' onclick='showCalender(this)' /></div>
<p id='output'></p>
</body> 
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT type=text/javascript>
String.prototype.Format = function(){
var tmpStr = this;
var iLen = arguments.length;
for(var i=0;i<iLen;i++){
tmpStr = tmpStr.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
}
return tmpStr;
}
Calendar = {
//region Property
today :new Date(),
year:2005,
month:8,
date:21,
curPosX:0,
curPosY:0,
curCapture:null,
curDay:null,
//endregion

//region Method
display:
function(o, e, d){
with(Calendar){
o = typeof(o) == "object" ? o : document.getElementById(o);
if(window.event){
curPosX = document.body.scrollLeft + event.x;
curPosY = document.body.scrollTop + event.y;
} else{
curPosX = e.pageX;
curPosY = e.pageY;
}
if(o.value == "" && d) o.value = d;
with(document.getElementById("Calendar__")){
if(o != curCapture) {
curCapture = o;
if(style.display == "block"){
style.left = curPosX + "px";
style.top = curPosY + "px";
}
else load();
}
else{
if (style.display == "block") style.display = "none";
else load();
} 
}
}
},
load:
function(){
with(Calendar){
curDay = loadDate(curCapture.value);
with(curDay){
year = getFullYear();
month = getMonth() + 1;
date = getDate();
}
init();
}
},
init:
function(){
with(Calendar){
with(new Date(year, month-1, date)){
year = getFullYear();
month = getMonth() + 1;
date =  getDate();
setDate(1);
var first = getDay();
setMonth(getMonth()+1, 0)
paint(first, getDate());
}
}
},
paint:
function(first, last){
var calendar = document.getElementById("Calendar__");
var grid = document.getElementById("dataGrid__");
var i, l;
l = Math.ceil((first + last)/7);
if(!document.all){
calendar.style.height = (41 + 19 * Math.ceil((first + last)/7)) + "px";
}
grid.innerHTML = new Array(l*7 + 1).join("<li><a></a></li>");
with(Calendar){
var strDate = "{0}-{1}".Format(year, month);
var isTodayMonth = ((year == today.getFullYear()) && (month == today.getMonth() + 1));
var isCurdayMonth = ((year == curDay.getFullYear()) && (month == curDay.getMonth() + 1));
var todayDate = today.getDate();
for(i=0;i<last;i++){
grid.childNodes[first + i].innerHTML = '<a href="{2}-{1}"{0} onclick="Calendar.setValue({1});return false">{1}</a>'.Format(((i+1) == todayDate && isTodayMonth) ? ' class="today"' : isCurdayMonth && (i+1) == curDay.getDate()?' class="curDay"':'', i + 1, strDate);
}
document.getElementById("dateText__").innerHTML = '<a href="' + (year-1) + '年" onclick="Calendar.turn(-12);return false" title="上一年"><<</a> <a href="上一月" onclick="Calendar.turn(-1);return false" title="上一月"><</a> ' + year + " - " + month + ' <a href="下一月" onclick="Calendar.turn(1);return false" title="下一月">></a> <a href="' + (year+1) + '年" onclick="Calendar.turn(12);return false" title="下一年">>></a>';
with(calendar){
style.left = Calendar.curPosX + "px";
style.top = Calendar.curPosY + "px";
style.display = "block";
}
}
},
turn:
function(num){
Calendar.month +=  num;
Calendar.date = 1;
Calendar.init();
},
setValue:
function(val){
with(Calendar){
curCapture.value = "{0}-{1}-{2}".Format(year, month, val);
document.getElementById("Calendar__").style.display = "none";
}
},
loadDate:
function(op, formatString){
formatString = formatString || "ymd";
var m, year, month, day;
switch(formatString){
case "ymd" :
m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$"));
if(m == null ) return new Date();
day = m[6];
month = m[5]*1;
year =  (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));
break;
case "dmy" :
m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$"));
if(m == null ) return new Date();
day = m[1];
month = m[3]*1;
year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
break;
default :
break;
}
if(!parseInt(month)) return new Date();
month = month==0 ?12:month;
var date = new Date(year, month-1, day);
return (typeof(date) == "object" && year == date.getFullYear() && month == (date.getMonth()+1) && day == date.getDate())?date:new Date();
function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;}
},
toString : function(){return ["Calendar v1.0", "author:我佛山人", "email:wfsr@msn.com", "version:1.0"].join("\n");}
//endregion
}
var__calendar_html = "<style>";
__calendar_html += "#Calendar__ {background-color:#eeeeee;width:157 !important;width:154px;position:absolute;display:none}";
__calendar_html += "#Calendar__ ul{list-style-type:none;margin-left:-38px !important;margin:0 0 0 -30px;}";
__calendar_html += "#Calendar__ ul li{display:block;width:20px;margin:1px;background-color:#fff;text-align:center;float:left;font:11px Tahoma}";
__calendar_html += "#Calendar__ ul li a{height:18px;display:block;background-color:#fff;line-height:18px;text-decoration:none;color:#333}";
__calendar_html += "#Calendar__ ul li a:hover{background:#336699;color:#FFF}";
__calendar_html += "#Calendar__ #dateText__{font:12px Tahoma;text-align:center}";
__calendar_html += "#Calendar__ #dateText__ a{font:10px Tahoma;text-decoration:none}";
__calendar_html += "#Calendar__ #head__ li a{font:bold 12px Tahoma}";
__calendar_html += "#Calendar__ #dataGrid__{}";
__calendar_html += "#Calendar__ #dataGrid__ li a:hover{background:#dedede url(/plus/calendar/check.gif) right bottom no-repeat;color:red}";
__calendar_html += "#Calendar__ #dataGrid__ .today{background:url(/plus/calendar/today.gif) center no-repeat;color:blue;}";
__calendar_html += "#Calendar__ #dataGrid__ .curDay{background:#dedede url(/plus/calendar/check.gif) right bottom no-repeat;color:blue;}";
__calendar_html += "</style>";
__calendar_html += "<div id=\"Calendar__\">";
__calendar_html += "<div id=\"dateText__\"></div>";
__calendar_html += "<ul id=\"head__\" onclick=\"return false\">";
__calendar_html += "<li><a href=\"#\">日</a></li><li><a href=\"#\">一</a></li><li><a href=\"#\">二</a></li><li><a href=\"#\">三</a></li><li><a href=\"#\">四</a></li><li><a href=\"#\">五</a></li><li><a href=\"#\">六</a></li>";
__calendar_html += "</ul>";
__calendar_html += "<ul id=\"dataGrid__\"></ul>";
__calendar_html += "</div>";
document.write(__calendar_html);
</SCRIPT>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

HTML代码

<Script LANGUAGE="JavaScript">
 var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二");
 var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);
 var days = new Array("日","一", "二", "三","四", "五", "六");
 var classTemp;
 var today=new getToday();
 var year=today.year;
 var month=today.month;
 var newCal;

function getDays(month, year) {
  if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;
  else return daysInMonth[month];
 }

function getToday() {
  this.now = new Date();
  this.year = this.now.getFullYear();
  this.month = this.now.getMonth();
  this.day = this.now.getDate();
 }

function Calendar() {
  newCal = new Date(year,month,1);
  today = new getToday();   
  var day = -1;
  var startDay = newCal.getDay();
  var endDay=getDays(newCal.getMonth(), newCal.getFullYear());
  var daily = 0;
  if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))
  {
   day = today.day;
  }
  var caltable = document.all.caltable.tBodies.calendar;
  var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());

for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++)
   for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++)
   {
    var cell = caltable.rows[intWeek].cells[intDay];
    var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1);         
    if ((intDay == startDay) && (0 == daily)){ daily = 1;}
    var daytemp=daily<10?("0"+daily):(daily);
    var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";
    if(day==daily) cell.className="DayNow";
    else if(intDay==6) cell.className = "DaySat";
    else if (intDay==0) cell.className ="DaySun";
    else cell.className="Day";
    if ((daily > 0) && (daily <= intDaysInMonth))
    {
     cell.innerText = daily;
     daily++;
    } else
    {
     cell.className="CalendarTD";
     cell.innerText = "";
    }
  }
  document.all.year.value=year;
  document.all.month.value=month+1;
 }

function subMonth()
 {
  if ((month-1)<0)
  {
   month=11;
   year=year-1;
  } else
  {
   month=month-1;
  }
  Calendar();
 }

function addMonth()
 {
  if((month+1)>11)
  {
   month=0;
   year=year+1;
  } else
  {
   month=month+1;
  }
  Calendar();
 }

function setDate() 
 {
  if (document.all.month.value<1||document.all.month.value>12)
  {
   alert("月的有效范围在1-12之间!");
   return;
  }
  year=Math.ceil(document.all.year.value);
  month=Math.ceil(document.all.month.value-1);
  Calendar();
 }
</Script>

<Script>
function buttonOver()
{
 var obj = window.event.srcElement;
 obj.runtimeStyle.cssText = "background-color:#FFFFFF";
// obj.className="Hover";
}

function buttonOut()
{
 var obj = window.event.srcElement;
 window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300);
}
</Script>

<Style>
Input {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;}

.Calendar {font-family: verdana;text-decoration: none;width: 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;}
.CalendarTD {font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;width:11%;text-align: center;}

.Title {font-family: verdana;font-size: 11pt;font-weight: normal;height: 24px;text-align: center;color: #333333;text-decoration: none;background-color: #A4B9D7;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-bottom-style:1px;border-top-color: #999999;border-right-color: #999999;border-bottom-color: #999999;border-left-color: #999999;}

.Day {font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;width:11%;text-align: center;}
.DaySat {font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}
.DaySun {font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}
.DayNow {font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: center;}

.DayTitle {font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;width:11%;text-align: center;}
.DaySatTitle {font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%;}
.DaySunTitle {font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 12%;}

.DayButton {font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;}

</Style>

<table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable">
<thead>
     <tr align="center" valign="middle"> 
  <td colspan="7" class="Title">
   <a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" type="text" size="4" maxlength="4" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 年 <input name="month" type="text" size="1" maxlength="2" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 月 <a href="JavaScript:addMonth();" title="下一月" Class="DayButton">4</a>
  </td>
 </tr>
 <tr align="center" valign="middle"> 
  <Script LANGUAGE="JavaScript">  
   document.write("<TD class=DaySunTitle id=diary >" + days[0] + "</TD>"); 
   for (var intLoop = 1; intLoop < days.length-1;intLoop++) 
    document.write("<TD class=DayTitle id=diary>" + days[intLoop] + "</TD>"); 
    document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>"); 
  </Script>
 </TR> 
</thead>
<TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()">
 <Script LANGUAGE="JavaScript">
  for (var intWeeks = 0; intWeeks < 6; intWeeks++)
  {
   document.write("<TR style='cursor:hand'>");
   for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");
   document.write("</TR>");
  } 
 </Script>
</TBODY>
</TABLE>
<Script  LANGUAGE="JavaScript">
 Calendar();
</Script>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

HTML代码

<HTML>
<HEAD>
<TITLE>最精致的日历式日期输入<a href="http://www.programbbs.com/com/">控件</a> (Smart Ver 1.00)</TITLE>
</HEAD>
<style>
body 
{
 font-size:12px;
 font-family:"Tahoma";
}
td
{
 font-size:12px;
 font-family:"Tahoma";
}
.inputdate
{
 border:1px solid #7287c6;
 text-align: center;
 font-size: 12px;
 font-style: normal;
 height: 16px;
}
</style>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<BODY topmargin="0" leftmargin="0">
点击输入框调用日历.<Script>DateBox("Test1")</Script>
 
<Script>DateBox("Test2","2004-01-01")</Script>
 其它事件调用日历.
<input type="text" class="inputdate" size="10" name="Test3" readonly>
<input type="button"  class="inputdate" onclick="OpenDate(Test3)" value="显示日历">
</BODY>
</HTML>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

HTML代码

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("<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>");
  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>");

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 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;'>");
  document.write("      <tr align=center>");
  document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=subYear(this) title='减小年份'><<</td>");
  document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=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% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=addMonth(this) title='增加月份'>></td>");
  document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=addYear(this) title='增加年份'>>></td>");
  document.write("      </tr>");
  document.write("    </table>");

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;'>");
  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 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>");
    document.write("    </tr>");
  }
  document.write("    </table>");

document.write("    <span style=cursor:hand onclick=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 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>