javascript 中能否做到当输入日期时间时，像使用控件一样的方便？

/*
日历控件

事件：
参数: oInput 接收日期的INPUT控件
ret 日期参照返回的日期字符串
onCalendarSelected(ret, oInput);*////////////////////////////////////////////////
// 变量声明
///////////////////////////////////////////////
var gaMonthDays = new Array(
/* Jan */ 31,     /* Feb */ 29, /* Mar */ 31,     /* Apr */ 30, 
/* May */ 31,     /* Jun */ 30, /* Jul */ 31,     /* Aug */ 31, 
/* Sep */ 30,     /* Oct */ 31, /* Nov */ 30,     /* Dec */ 31 )var goSelectedCell = null // 当前选中的单元
var gnCurrentDay = null // 当前选中的天
var gnCurrentYear = null // 当前年
var gnCurrentMonth = null // 当前月
var goTfBind = null // 当前绑定的输入框///////////////////////////////////////////////// 初始开始化日历
function initCalendar(){
var d = new Date();
gnCurrentYear = d.getFullYear();
gnCurrentMonth = d.getMonth();
gnCurrentDay = d.getDate();

for(y=1930; y<2020; y++){
var oOption = document.createElement("OPTION");
oOption.text=y;
oOption.value=y;
selYear.add(oOption);
if(y == gnCurrentYear){
oOption.selected = true;
}
}
selYear.onchange = onSelectedYear;

for(m=1; m<=12; m++){
var oOption = document.createElement("OPTION");
oOption.text=m;
oOption.value=m-1;
selMonth.add(oOption);
if((m-1) == gnCurrentMonth){
oOption.selected = true;
}
}
selMonth.onchange = onSelectedMonth;

setDayOfMonth(gnCurrentYear, gnCurrentMonth, gnCurrentDay);
}// 日历控件的主入口点
function showCalendar(strTfBind){
var tfBind = document.all[strTfBind];
var oParent = tfBind.offsetParent; // 计算下拉框的位置
var left = tfBind.offsetLeft;
var top = tfBind.offsetTop + tfBind.offsetHeight; 
while(oParent != null){
left += oParent.offsetLeft;
top += oParent.offsetTop;
if(oParent.tagName == "DIV"){
left -= oParent.scrollLeft;
top -= oParent.scrollTop;
}
oParent = oParent.offsetParent;
} _divCalendar.style.display = "block";
_divCalendar.style.left = left;
_divCalendar.style.top = top;
goTfBind = tfBind;

// 将当前的DIV附加到事件的属性上，事件舰艇程序可以辨别是否是当前正在打开的DIV
// 参见bp_head.jsp中对DOCUMENT的ONCLICK事件的监听
document.showingDiv = _divCalendar;
}// 显示当月日历，设置每一天是星期几
function setDayOfMonth(nYear, nMonth, nDay){
var nDays = getDaysOfMonth(nYear, nMonth);
var oDate = new Date(nYear, nMonth, 1);
var nFirstDay = oDate.getDay();
var num = 1;

for(row=1; row<7; row++){
for(col=0; col<7; col++){
if( ((row == 1) && (col < nFirstDay)) || (num > nDays) ){
tbCalendar.rows(row).cells(col).innerText = "";
}else{
if(num == nDay){
setSelectedCell(tbCalendar.rows(row).cells(col));
}
tbCalendar.rows(row).cells(col).innerText = num++;
}
}
}
}
 
// 检验某年是否为闰年
// 返回：true/false
function checkLeapYear(nYear){
return ((nYear % 4 == 0) && (nYear % 100 != 0)) || (nYear % 400 == 0);
}// 返会某年某月共有多少天
function getDaysOfMonth(nYear, nMonth){
if(nMonth == 1){ // 如果是二月份需要判断是否闰年
if(checkLeapYear(nYear)){
return 29;
}else{
return 28;
}
}else{
return gaMonthDays[nMonth];
}
}// 将选中的单元高亮
function setSelectedCell(cell){
if(goSelectedCell != null){
goSelectedCell.className = "calendardaycell";
}
goSelectedCell = cell;
goSelectedCell.className = "selectedcell";
}

/////////////////////////////////////////////////////////////
// 事件响应
/////////////////////////////////////////////////////////////
function onClickCell(){
if(window.event.srcElement.tagName == "TD"){
var oCell = window.event.srcElement;

if(oCell.innerText != ""){
gnCurrentDay = oCell.innerText;
setSelectedCell(oCell);

// 返回数值
var ret = "";
ret += gnCurrentYear;
ret += "-";
gnCurrentMonth++;
ret += ((gnCurrentMonth >= 10) ? gnCurrentMonth : ("0" + gnCurrentMonth));
gnCurrentMonth--;
ret += "-";
ret += ((gnCurrentDay >= 10) ? gnCurrentDay : ("0" + gnCurrentDay));
goTfBind.value = ret;

try{
onCalendarSelected(goTfBind, ret); // 回调事件响应函数
}catch(exception){
}
goTfBind = null;
}
// 关闭参照
_divCalendar.style.display = "none";
}

}function onSelectedYear(){
gnCurrentYear = selYear.value;
setDayOfMonth(gnCurrentYear, gnCurrentMonth, gnCurrentDay);}
function onSelectedMonth(){
gnCurrentMonth = selMonth.value;
setDayOfMonth(gnCurrentYear, gnCurrentMonth, gnCurrentDay);
} function loadCalendarStyleSheet(){
var style = document.styleSheets(0);
style.addRule(".calendartitle", "{ FONT-SIZE: 10pt; FONT-STYLE: normal; BACKGROUND-COLOR: #dddddd; TEXT-DECORATION: none}");
style.addRule(".calendardaycell", "{ FONT-SIZE: 9pt; BACKGROUND-COLOR: #f5f5f5; COLOR: #000000; CURSOR: hand; text-align: center }");
style.addRule(".selectedcell", "{ FONT-SIZE: 10pt; BACKGROUND-COLOR: #6060ff; COLOR: #FFFFFF; CURSOR: hand; text-align: center }");
}function loadCalendar(){
var txt = "";
var arrDays = new Array("日", "一", "二", "三", "四", "五", "六"); loadCalendarStyleSheet();

txt += "<div id='_divCalendar' style='color: #000000; BACKGROUND-COLOR: #ffffff; position: absolute; BORDER-BOTTOM: solid 1px; BORDER-LEFT: solid 1px; BORDER-RIGHT: solid 1px; BORDER-TOP: solid 1px; z-index: 17; display: none; height: 140px; width: 178px' " + "class='menu'>";
txt += "<SELECT id=selYear style='HEIGHT: 12px; WIDTH: 72px; FONT-SIZE: 8pt' onClick='_onClickSelectOfCalendar()'>"; 
txt += "</SELECT> <LABEL style='font-size: 12px'>年</LABEL> "; 
txt += "<SELECT id=selMonth style='HEIGHT: 12px; WIDTH: 40px; FONT-SIZE: 8pt' onClick='_onClickSelectOfCalendar()'>"; 
txt += "</SELECT> <LABEL style='font-size: 12px'>月</LABEL>"; txt += "<table id='tbCalendar' width='175' border='0' cellpadding='0' cellspacing='0' bordercolorlight='#000000' bordercolordark='#ffffff' bgcolor='#eeeeee' onClick='onClickCell()'>";

txt += "<tr height='20' class='calendartitle'>";
for(i=0; i<7; i++){
txt += "<th height='20' width='25'>" + arrDays[i] + "</th>";
}
txt += "</tr>" for(r=0; r<6; r++){
txt += "<tr height='16' class='calendardaycell'>";
for(d=0; d<7; d++){
txt += "<td height='16' width='25'></td>";
}
txt += "</tr>";
}
txt += "</table>";
txt += "</div>";

document.body.insertAdjacentHTML("afterBegin", txt);

initCalendar();
}function _onClickSelectOfCalendar(){
event.cancelBubble = true;
event.returnValue = true;
}

解决方案 »

  1.   

    日历控件应该尽量做到与页面无关，前一段时间按照客户要求做了一个js的日历控件
    以下是源代码，放在一个js文件中，其他页面只需要引用这个文件，便可生成日历这个控件的思路是前一页面计算下一页面，由于原始的设计需要，这个控件严格输出yyyy-mm-dd格式，只对含在document.forms[0]（第一个form）的input type="text">有效，根据用户原先输入的日期（如无原始日期则取本机日期）产生日期当月的月历
    //将以下function保存为calendar.jsfunction getHTML(id,year,month)
    {
      str = "<HTML><HEAD><TITLE>Calendar</TITLE>";
      str += "<STYLE type=\"text/css\"><!--";
      str += "td,th,input,select{font-size:12px}";
      str += "a{color:black;text-decoration:none}";
      str += "a:hover{color:red;text-decoration:underline}";
      str += "a.dir{color:blue;text-decoration:none}";
      str += "a.dir:hover{color:red;text-decoration:none}";
      str += "a.week6{color:#6666FF;text-decoration:none}";
      str += "a.week6:hover{color:red;text-decoration:underline}";
      str += "a.week7{color:#FF6666;text-decoration:none}";
      str += "a.week7:hover{color:red;text-decoration:underline}";
      str += "--></STYLE></HEAD>";
      str += "<BODY>";
      str += getBODY(id,year,month);
      str += "</BODY></HTML>";
      return str;
    }function getBODY(id,year,month)
    {
      str = "<table border ALIGN=center><TR>";
      str += "<TD>[<A class=\"dir\" href=\"javascript:document.close();document.write(opener.getHTML('"+id+"',"+(year-1)+","+month+"))\"><<</A>]</TD>";
      str += "<TD>[<A class=\"dir\" href=\"javascript:document.close();document.write(opener.getHTML('"+id+"',"+year+","+((month==1)?12:(month-1))+"))\"><</A>]</TD>";
      str += "<TD>[<A class=\"dir\" href=\"javascript:opener.document.forms[0]."+id+".value='';self.close()\">Clear</A>]</TD>";
      str += "<TD>[<A class=\"dir\" href=\"javascript:document.close();document.write(opener.getHTML('"+id+"',"+year+","+((month==12)?1:(month+1))+"))\">></A>]</TD>";
      str += "<TD>[<A class=\"dir\" href=\"javascript:document.close();document.write(opener.getHTML('"+id+"',"+(year+1)+","+month+"))\">>></A>]</TD>";
      str += "</TR></table><HR>";
      str += getCalendar(id,year,month);
      return str;
    }function getCalendar(id,year,month)
    {
      monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
      if ( ( (year%4==0) && (year%100!=0) ) || (year%400==0) ) monthDays[1] = 29;  nDays = monthDays[month-1];
      
      today.setYear(year);
      today.setMonth(month-1);
      today.setDate(1);
      startDay = today.getDay();
      
      str = "<table border ALIGN=center><TR><TH colSpan=7 height=18><FONT color=#336699>";
      str += year+" 年 "+month+" 月</FONT></TH></TR>";
      str += "<TR bgcolor=#CCCCCC><TH>一</TH><TH>二</TH><TH>三</TH><TH>四</TH><TH>五</TH><TH>六</TH><TH>日</TH></TR>";
      str += "<TR>";
      column = 0;
      for (i=0; i<startDay; i++)
      {
        str += "<TD></TD>";
        column++;
      }
      for (i=1; i<=nDays; i++)
      {
        if (column == 0 ) {
          str += "<TD><A href=\"javascript:opener.document.forms[0]."+id+".value='"+year+"-"+patch(month)+"-"+patch(i)+"';self.close()\" class=\"week7\">"+i+"</A></TD>";
        } else if (column == 6 ) {
          str += "<TD><A href=\"javascript:opener.document.forms[0]."+id+".value='"+year+"-"+patch(month)+"-"+patch(i)+"';self.close()\" class=\"week6\">"+i+"</A></TD>";
        } else {
          str += "<TD><A href=\"javascript:opener.document.forms[0]."+id+".value='"+year+"-"+patch(month)+"-"+patch(i)+"';self.close()\">"+i+"</A></TD>";
        }
        column++;
        if (column == 7) {
          str += "</TR><TR>"; 
          column = 0;
        }
      }
      str += "</table>";
      return str;
    }function patch(n)
    {
      return (n-10<0) ? ("0"+n) : (""+n);
    }function setDate(id)
    {
      try { newwin.close(); } catch(Exception) {}
      td = document.forms[0].all[id].value;
      today = new Date();
      if (td == "") {
        year = today.getYear();
        if (year<100) year += 1900;
        month = today.getMonth()+1;
      } else {
        year = td.substring(0,4)-0;
        month = td.substring(5,7)-0;
      }
      newwin = window.open('','','height=240,width=164,top='+(event.screenY-100)+',left='+event.screenX);
      newwin.document.write(getHTML(id,year,month));
    }//calendar.js到此为止
    //使用setDate(id)方法，以下为引用示例
    //以下代码保存为1.htm<html>
    <body>
    <title>日历控件</title>
    <script src="calendar.js"></script>
    <body>
    <form>
      <input type="text" readonly id="inputdate">
      <input type="button" value="输入日期" onclick=setDate("inputdate")>
      <br>
      直接点击左边文本框也可以输入日期：<input type="text" readonly id="test" onclick=setDate("test") value="2001-01-01">
    </form>
    </body>
    </html>//1.htm到此为止由于这段代码最初的设计目的很单一，所以没有考虑Netscape的兼容问题、以及灵活控制输出格式的问题，望各路大虾不吝赐教！
      

  2.   

    如果使用asp.net的話 , 幾句話就可以了
    <asp:calendar runar="server">
    還有很多參數,可以查!