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 οnchange= '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 οnchange= '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%; ' >     </td >";
str+=" <td style= 'font-size: 12px;color: #000000;line-height: 150%;cursor:hand ' id=preYear οnclick=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 οnclick=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 οnclick=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 οnclick=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)+" ' οnclick= '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%; >         </td >";
str+=" <td οnclick=hide() style= 'font-size: 12px;color: #000000;line-height: 150%;CURSOR: hand; ' >"
str+="关闭";
str+=" </td >";
str+=" <td οnclick=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.οnclick=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 οnclick=" showdate(this);" / >
</form >
</body >
</html >