js.date

    <style type="text/css">
/**********日历样式开始********************/
#calendar_container {
width: 160px;
border: 1px solid #06c;
}

#calendar {
border-collapse: collapse;
background-color: #fff;
width: 160px;
height: 120px;
margin: 0px auto;
cursor: default;
}

#calendar td {
font-size: 12px;
text-align: center;
vertical-align: middle;
font-family: "宋体";
}

#calendar thead {
background-color: #999;
color: #fff;
}

#calendar caption {
background-color: #06c;
}

#calendar a {
color: #f90;
margin: 0 5px;
text-decoration: none;
}

#calendar #prev_month,#calendar #next_month {
font-size: 18px;
margin: 0;
}

#calendar #c_today {
background-color: #036;
color: #fff;
}

#calendar .over {
background-color: #ccc;
}

#calendar .keydate {
color: #06f;
}
</style>

<script type="text/javascript">
//////////////jcalendar 类////////////////////////////
/***************************
*jcalendar日历控件
*@author brull
*@email [email][e-mail][/email]
*@date 2007-4-16
*@更新 2007-5-27
*@version 1.0 beta
***************************/
/*
*@param year 年份,[可选]
*@param month 月份，[可选]
*@param date 日期，[可选]
*或者是以横线间隔开的日期，比如：2007-4-27
*/

function jcalendar (year,month,date) {
if($("calendar"))return;//唯一实例
var _date = null;
if(arguments.length == 3) _date = new date(year,month-1,date);
else if(arguments.length == 1 &amp;&amp; typeof arguments[0] == "string")
_date = eval("new date(" + arguments[0].split("-").join() + ")");
//如果没有参数，就初始化为当天日期
else if(arguments.length == 0) _date = new date();
this.year = _date.getfullyear();
this.month = _date.getmonth() + 1;
this.date = _date.getdate();
this.firstyear = 1949;
this.lastyear = 2049;
jcalendar.cur_year = this.year;
jcalendar.cur_month = this.month;
jcalendar.cur_date = this.date;
jcalendar.cur_obj_id = null;//作为输入控件时保存当前文本框的id
}
/**
*设置日历年份下拉菜单的年份范围
*@first 第一个年份界限
*@last 第二个年份界限
*两个参数顺序可以颠倒
*/
jcalendar.prototype.setyears = function(first,last){
if(isnan(first) || isnan(last)) return;
this.firstyear = math.min(first,last);
this.lastyear = math.max(first,last);
}
/**
*以html串返回日历控件的html代码
*/
jcalendar.prototype.tostring = function(){
var fday = new date(this.year,this.month-1,1).getday();//每月第一天的星期数
var select_year = new array();//年份下拉菜单
var select_month = new array();//月份下拉菜单
//日历里的每个单元格的数据，预先定义一段空数组，对应日历里第一周空的位置。[注意星期天对应的数是0]
var date = new array(fday > 0 ? fday - 1 : 0);
var daynum = new date(this.year,this.month,0).getdate();//每月的天数
var html_str = new array();//保存日历控件的html代码
var date_index = 0;//date数组的索引
var weekday = ["日","一","二","三","四","五","六"];

//填充年份下拉菜单
select_year.push("<select id='select_year'  style='display:none' onblur =\"hide(this);show('title_year')\" onchange='jcalendar.update(this.value,jcalendar.cur_month)'>");
for(var i = this.firstyear; i <= this.lastyear; i++){
if(i == this.year)
select_year.push("<option value='" + i + "' selected='selected'>" + i +"</option>");
else
select_year.push("<option value='" + i + "'>" + i +"</option>");
}
select_year.push("</select>");

//填充月份下拉菜单
select_month.push("<select  id='select_month' style='display:none'  onblur =\"hide(this);show('title_month')\" onchange='jcalendar.update(jcalendar.cur_year,this.value)'>");
for(var i = 1; i <= 12; i++){
if(i == this.month)
select_month.push("<option value='" + i + "' selected='selected'>" + i +"月</option>");
else
select_month.push("<option value='" + i + "'>" + i +"月</option>");
}
select_month.push("</select>");
//初始化date数组
for(var j = 1; j <= daynum; j++){
date.push(j);
}
//开始构建日历控件的html代码
html_str.push("<table id='calendar'>");
//日历表格caption
html_str.push("<caption>" + "<a href='#'  id='prev_month' title='上一月份' onclick=\"jcalendar.update(jcalendar.cur_year,jcalendar.cur_month-1);return false;\">&amp;laquo;</a><a href='#' id='title_year' title='点击选择年份' onclick=\"hide(this);show('select_year');$('select_year').focus();return false\">" + this.year + "年</a>" + select_year.join("") + "<a href='#' id='title_month' title='点击选择月份' onclick=\"hide(this);show('select_month');$('select_month').focus();return false\">" + this.month + "月</a>" + select_month.join("") + "<a href='#' id='next_month' title='下一月份' onclick=\"jcalendar.update(jcalendar.cur_year,jcalendar.cur_month+1);return false;\">&amp;raquo;</a></caption>");
//日历表格头
html_str.push("<thead><tr>");
for(var i = 0; i < 7; i++){//填充日历头
html_str.push("<td>" + weekday[i] + "</td>");
}
html_str.push("</tr></thead>");
//日历主体
var tmp;
html_str.push("<tbody>");
for(var i = 0; i < 6; i++){//填充日期，6行7列
html_str.push("<tr>");
for(var j = 0; j < 7; j++){
tmp = date[date_index++];
if(!tmp) tmp = "";
html_str.push("<td ");
if(tmp == this.date) html_str.push("id='c_today' ");
html_str.push("onmouseover='jcalendar.over(this)' onmouseout='jcalendar.out(this)' onclick='jcalendar.click(this)'>" + tmp + "</td>");
}
html_str.push("</tr>");
}
html_str.push("</tbody></table>");
return html_str.join("");
}
/**
*特别显示关键天，典型例子博客的日历
* 实现原理，为每个关键天的表格单元添加一个class,名字为keydate,css样式需要自己写，比如加个背景之类的
*@param 日期的数组，比如：[1,4,6,9]
*/
jcalendar.prototype.setkeydate = function(){
var dates = arguments[0];
var tds = $tn("td",$("calendar"));
var reg = null;
for(var i = 0; i < dates.length; i++){
reg = new regexp("\\b" + dates[i] + "\\b");
for(var j = 7; j < tds.length; j++){//忽略表格头
if(reg.test(tds[j].innertext)){
tds[j].classname = "keydate";
break;
}
}
}
}
/**
*可以将日历控件邦定到某个文本框，在点击文本框的时候，会在direction指定的方向弹出日历,可以多次调用来帮定多个文本框
*@ param obj_id 需要邦定日历的文本框的id
*@ param direction 日历出现的相对于文本框的方向 [可选] 默认为right
*/
jcalendar.prototype.bind = function(obj_id,direction){
var obj = $(obj_id);
var direction = direction ? direction : "right";
if(!obj)return;
if(!$("calendar_container")){//唯一容器
var contain = $dc("div");
var s = contain.style;
s.visibility = "hidden";
s.position = "absolute";
s.top = "0px";//不能占据页面空间
s.zindex = 65530;
contain.id = "calendar_container";
contain.innerhtml = this.tostring();
document.body.appendchild(contain);
if(isie){
var ifm = $dc("iframe");
var s = ifm.style;
ifm.frameborder = 0;
ifm.height = (contain.clientheight - 3) + "px";
s.visibility = "inherit";
s.filter = "alpha(opacity=0)";
s.position = "absolute";
s.top = "0px";//不能占据页面空间
s.width = $("calendar_container").offsetwidth;
s.zindex = -1;
contain.insertadjacentelement("afterbegin",ifm);
}
}
//覆盖日历事件
jcalendar.onupdate = function () {};
jcalendar.onclick = function (year,month,date){
$(jcalendar.cur_obj_id).value = $(jcalendar.cur_obj_id).value.replace(/^[^\s]*/i,year + '-' + month + '-' + date);
hide("calendar_container");
}
//邦定事件
document.attachevent("onclick",function(){
if($("calendar_container").style.visibility="visible")hide("calendar_container");
});
obj.attachevent("onclick",function(e){
var obj = e.srcelement;
var dates =obj.value.split(/\s/)[0].split("-");//文本框日期数组,文本框内容可能有时间这样的字串，即:2007-5-26 15:39
var left = obj.offsetleft , top = obj.offsettop;
var x,y,left,top;
var contain = $("calendar_container");
var body = isdtd ? document.documentelement : document.body;
left = body.scrollleft + e.clientx - e.offsetx;
top = body.scrolltop + e.clienty - e.offsety;
switch(direction){
case "right" : x = left + obj.offsetwidth; y = top;break;
case "bottom" : x = left; y = top + obj.offsetheight;break;
}
contain.style.top = y + "px";
contain.style.left = x + "px";
//更新日历日期
if(dates.length == 3 &amp;&amp; (jcalendar.cur_year != dates[0] || jcalendar.cur_month != dates[1] || jcalendar.cur_date != dates[2]))
jcalendar.update(dates[0],dates[1],dates[2]);//如果文本框有时间则更新时间到文本框的时间
else if (dates.length != 3){
var now = new date();
jcalendar.update(now.getfullyear(),now.getmonth() + 1,now.getdate());
}
if($("calendar_container").style.visibility="hidden")show("calendar_container");
e.cancelbubble = true;
jcalendar.cur_obj_id = obj.id;
});
$("calendar_container").attachevent("onclick",function(e){e.cancelbubble = true;});
}
/*===========================静态方法=======================================*/
/**
*更新日历内容
*/
jcalendar.update = function(_year,_month,_date){
date = new date(_year,_month-1,1);
var fday = date.getday();//每月第一天的星期数
var year = date.getfullyear();
var month = date.getmonth() + 1;
var daynum = new date(_year,_month,0).getdate();//每月的天数
var tds = $tn("td",$("calendar"));
var years = $("select_year").options;
var months = $("select_month").options;
var _date = _date ? _date : jcalendar.cur_date;
//更新当前年月
jcalendar.cur_year = year;
jcalendar.cur_month = month;
if(_date &amp;&amp; _date <= daynum) jcalendar.cur_date = _date;
else if(_date > daynum) jcalendar.cur_date = _date - daynum;
$("title_year").innertext = year + "年";
$("title_month").innertext = month + "月";
//更新年份下拉菜单选中项
for(var i = years.length - 1; i >= 0; i-- ){
if(years[i].value == year){
$("select_year").selectedindex = i;
break;
}
}
//更新月份下拉菜单选中项
for(var i = months.length - 1; i >= 0; i-- ){
if(months[i].value == month){
$("select_month").selectedindex = i;
break;
}
}
//清空日历内容,忽略日历头，即第一行
for(var i = 7; i < tds.length; i++) tds[i].innertext = "";
if( $("c_today"))$("c_today").removeattribute("id");
for(var j = 1; j <= daynum; j++){
tds[6 + fday + j].innertext = j;
if(j == jcalendar.cur_date) tds[6 + fday + j].id = "c_today";
}
jcalendar.onupdate(year,month,jcalendar.cur_date);
}
jcalendar.click = function(obj){
var tmp = $("c_today");
if(tmp &amp;&amp; tmp == obj){
jcalendar.onclick(jcalendar.cur_year,jcalendar.cur_month,jcalendar.cur_date);
}
else if(obj.innertext != ""){
if(tmp) tmp.removeattribute("id");
jcalendar.cur_date = parseint(obj.innertext);
obj.id = "c_today";
jcalendar.onclick(jcalendar.cur_year,jcalendar.cur_month,jcalendar.cur_date);
}
}
jcalendar.over = function(obj){
if(obj.innertext != "") obj.classname = "over";
}
jcalendar.out = function(obj){
if(obj.innertext != "") obj.classname = "";
}
//日历更改时执行的函数，可以更改为自己需要函数,控件传递过来的参数为当前日期
jcalendar.onupdate = function(year,month,date){
alert("日历已更改，当前日历日期：" + year + "年" + month + "月" + date + "日");
}
//点击日期时执行的函数，可以更改为自己需要函数,控件传递过来的参数为当前日期
jcalendar.onclick = function(year,month,date){
alert( "当前触发的日期：" + year + "年" + month + "月" + date + "日");
}

var j = new jcalendar();
j.setyears(1990,2020);
j.bind('bdate',"bottom");
       var dt=new date();
    var y=dt.getfullyear();
    var m=dt.getmonth()+1;
    if(m<10)
      m="0"+m;
    var d=dt.getdate();
                    if(d<10)
                        d="0"+d;
    var sr=y+"-"+m+"-"+d;
    document.getelementbyid('bdate').value=sr;
   


</script>