date.js

function draw(obj)
{
  this.year    =  new Date().getFullYear();//取得年份
  this.month   =  new Date().getMonth();//取得月份
  this.date    =  new Date().getDate();//取得日期
  this.result  =  "";
  this.fday    =  "";
  this.fdate   =  "";
  this.ldate   =  "";
  this.x=0;
  this.y=0;
  this.obj=obj;
  this.YearSt  = 1950;
  this.YearEnd = 2050;
  this.createTable(1);
}
draw.prototype.createTable=function(IsDiv)
{
  this.fday=new Date(this.year,this.month,1).getDay();
  this.fdate=1-this.fday;
  this.ldate=new Date(this.year,this.month+1,0).getDate();
  var str="";
  if(IsDiv==1)
  {
    var str=" <div style= 'height:0px; width:0px; border:2 px; z-index:500; position:absolute;left:0px; top: 0px; z-index:5000; display:none ' id= 'Div'>";
  }
  str+=" <table style="+this.style+" >";
  str+=" <tr >";
  //显示年份的下拉框
  str+=" <td  style=font-size: 12px;color: #000000;line-height: 150%; >";
  str+=" <select id=ddlYear onchange= 'YYchange(); ' style=margin:-2px >";
  for(var i=this.YearSt;i  <= this.YearEnd;i ++)
   {
     str+=" <option value=" + i + " >"+ i+ "年 </option >";
   }
  str+=" </select >";
  str+=" </td >";
  //显示月份的下拉框
  str+=" <td style=font-size: 12px;color: #000000;line-height: 150%; >";
  str+=" <select id=ddlMonth onchange= 'MMchange(); ' style=margin:-2px >";
  for(var i=1;i  <= 12;i ++)
   {
     str+=" <option value=" + (i-1) + " >"+ i+ "月 </option >";
   }
  str+=" </select >";
  str+=" </td >";
  str+=" </tr >";
  str+=" </table >";
  //显示年份，月份调节按钮
  str+=" <table >";
  str+=" <tr align=center >";
  str+=" <td  style= 'font-size: 12px;color: #000000;line-height: 150%; ' >&nbsp&nbsp&nbsp&nbsp </td >";
  str+=" <td  style= 'font-size: 12px;color: #000000;line-height: 150%;cursor:hand ' id=preYear onclick=perYear() >▲ </td >";
  str+=" <td  style= 'font-size: 12px;color: #000000;line-height: 150%; ' >年 </td >";
  str+=" <td  style= 'font-size: 12px;color: #000000;line-height: 150%;cursor:hand  'id=nextYear onclick=nextYear() >▼ </td >";
  str+=" <td  style= 'font-size: 12px;color: #000000;line-height: 150%;cursor:hand ' id=showm > </td >";
  str+=" <td  style= 'font-size: 12px;color: #000000;line-height: 150%;cursor:hand ' id=preMonth onclick=preMonth() >▲ </td >";
  str+=" <td  style= 'font-size: 12px;color: #000000;line-height: 150%; ' >月 </td >";
  str+=" <td  style= 'font-size: 12px;color: #000000;line-height: 150%;cursor:hand ' id=nextMonth onclick=nextMonth() >▼ </td >";
  str+=" <td  style= 'font-size: 12px;color: #000000;line-height: 150%;cursor:hand ' id=shown > </td >";
  str+=" </tr >";
  str+=" </table >";
  //显示星期表头
  str+= " <table border= '1 '  >";
  str+= " <tr >";
  str+= " <td  style= 'font-size: 12px;color: #000000;line-height: 150%; ' >日 </td > <td  style= 'font-size: 12px;color: #000000;line-height: 150%; ' >一 </td > <td  style= 'font-size: 12px;color: #000000;line-height: 150%; ' >二 </td > <td  style= 'font-size: 12px;color: #000000;line-height: 150%; ' >三 </td > <td  style= 'font-size: 12px;color: #000000;line-height: 150%; ' >四 </td > <td  style= 'font-size: 12px;color: #000000;line-height: 150%; ' >五 </td > <td  style= 'font-size: 12px;color: #000000;line-height: 150%; ' >六 </td >";
  str+= " </tr >";
  str+= " </table >";
  //显示日期
  str+=" <table border= '1 'style=background-color:#CCCCCC; >";
  for(var i=1,j=this.fdate;i <7;i++)
  {
    str+=" <tr >";
      for(var k=0;k <7;k++)
      {
         if(this.isdate(j)=="")
         {
           str+=" <td  style= 'font-size: 12px;color: #000000;line-height: 150%;";
         }
         else
         {
           str+=" <td d= '"+this.year+"-"+(parseInt(this.month)+1).toString()+"-"+this.isdate(j)+" ' onclick= 'getdate(d) '   style= 'font-size: 12px;color: #000000;line-height: 150%;";
         }
        if(j==this.date)
        {
          str+="BACKGROUND-COLOR:#60a0d5;COLOR: white;CURSOR: hand; ' >"//将当前日期设背景颜色
        }
        else
        {
          str+="CURSOR: hand; ' >"
        }
        str+=this.isdate(j++);
        str+=" </td >";
      }
    str+=" </tr >";
  }
  str+=" </table >";
  str+=" <table >"
  str+=" <tr >";
  str+=" <td  style=font-size: 12px;color: #000000;line-height: 150%; >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp </td >";
  str+=" <td onclick=hide()  style= 'font-size: 12px;color: #000000;line-height: 150%;CURSOR: hand; ' >"
  str+="关闭";
  str+=" </td >";
  str+=" <td onclick=Clear()  style= 'font-size: 12px;color: #000000;line-height: 150%;CURSOR: hand; ' >"
  str+="清空";
  str+=" </td >";
  str+=" </tr >"
  str+=" </table >";
  
    if(IsDiv==1)
    {
       str+=" </div >";
    }
  this.result=str;

}
//查验日期的范围
draw.prototype.isdate=function(n)
{
// return (n >=1&&n <=ldate)?n:"";
    if  (n >=1&&n <=this.ldate)
      {
         return n;
      }           
    else 
      {
        return "";
      }  
}
var date=new draw();
date.createTable(1);
document.write(date.result);
show();

//年、月下拉框显示当前选中的年、月份
function show()
{
  var ddlYear   = document.getElementById("ddlYear");
  var ddlMonth  = document.getElementById("ddlMonth")
  ddlYear.value=date.year;
  ddlMonth.value=date.month;
}
//月下拉框改变事件
function MMchange()
{
    var ddlMonth=document.getElementById("ddlMonth");
    date.month=ddlMonth.value;
    date.createTable();
    var div=document.getElementById("Div");
    div.innerHTML=date.result;
    show();
}
//年下拉框改变事件
function YYchange()
{
    var ddlYear=document.getElementById("ddlYear");
    var div=document.getElementById("Div");
    date.year=ddlYear.value;
    date.createTable();
    div.innerHTML=date.result;
    show();
}
//上一年事件
function perYear()
{
  if(date.year!=date.YearSt)
   {
   　 date.year--;
      date.createTable();
      var div=document.getElementById("Div");
      div.innerHTML=date.result;
      show();
   }
}
//下一年事件
function nextYear()
{
  if(date.year!=date.YearEnd)
   {
   　 date.year++;
      date.createTable();
      var div=document.getElementById("Div");
      div.innerHTML=date.result;
      show();
   }
}
//上一月事件
function preMonth()
{

　if(date.month!=0)
 　{
   　date.month--;
     date.createTable();
     var div=document.getElementById("Div");
     div.innerHTML=date.result;
     show();
   }
}
//下一月事件
function nextMonth()
{
　if(date.month!=11)
 　{
   　date.month++;
     date.createTable();
     var div=document.getElementById("Div");
     div.innerHTML=date.result;
     show();
   }
}
//显示并定位
function showdate(oo)
{
    date.obj=oo;
    var div=document.getElementById("Div");
    div.style.display="block";
    div.style.left=window.event.x+"px";
    div.style.top=window.event.y+"px";
    CloseDiv();
}
//获取日期
function getdate(id)
 {
   (date.obj).value=id;
   var div=document.getElementById("Div");
   div.style.display="none";      
 }
 //隐藏
function hide()
 {
   var div=document.getElementById("Div");
   div.style.display="none"; 
 }
//清空
function Clear()
{
  date.obj.value = "";
  hide();
}
//当点击日期控件外，日期控件关闭。
    function CloseDiv()
    {
        var body=document;//.body;
        body.onclick=function()
        {
             var div=document.getElementById("Div");
             with(window.event.srcElement){ 
               if (id != date.obj.id&&id != "Div"&&id != "ddlYear"&&id != "ddlMonth"&&id != "preMonth"&&id != "perYear"&&id != "nextYear"&&id != "nextMonth")
                div.style.display="none";
              }
            
        }
    }

主页

<html>
<head runat="server" >
     <title >Untitled Page </title >
     <script src="date.js" type="text/javascript"> </script >
<style type=text/css >
td 
{ 
   font-size: 12px;
   color: #000000;
   line-height: 150%;
}
</style >
</head >

<body >
     <form id="form1" runat="server" >
         <input type="text" readonly onclick=" showdate(this);" / >  
     </form >
</body >
</html >