月历javascript,月历表制作 三年级漂亮

需要一个js编写的月历

!DOCTYPE HTML

成都创新互联公司成都网站建设按需定制，是成都网站推广公司,为水处理设备提供网站建设服务,有成熟的网站定制合作流程，提供网站定制设计服务：原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站维护热线：18982081108

html lang="en"

head

meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" /

meta http-equiv="Content-Type" content="text/html;charset=UTF-8"

titletest/title

link rel="stylesheet" href="css.css" type="text/css" media="screen"

script src=""/script

/head

body

input class="test" value="" style="paddind-top: 100px; padding-left:100px;"/  

input class="test" value=""  style="margin-top :100px; margin-left:100px;"/  

style type="text/css"

#SimpleCanleder_Year_Month *{margin:0px;padding:0px;}  

#SimpleCanleder_Year_Month .clear{clear: both;}  

#SimpleCanleder_Year_Month {width:140px; font-size:14px;line-height:14px; border:1px solid lavender; padding:10px; padding-top:5px;padding-right:5px; position:absolute; background-color:white;}  

#SimpleCanleder_Year_Month .title{height:35px;}  

#SimpleCanleder_Year_Month .title li.middle{width:65px; position:relative; overflow:visible;}  

#SimpleCanleder_Year_Month .title li.middle select{margin-top:-3px}   

#SimpleCanleder_Year_Month .title li.middle .year_list{width:100px; position:absolute; background-color:lightgrey; left:-20px}  

#SimpleCanleder_Year_Month .title li.middle .year_list li {background-color:transparent; text-align:center; width:45px; height: 20px;}  

#SimpleCanleder_Year_Month .title li.middle .year_list ul{clear: both;}  

#SimpleCanleder_Year_Month .title li, #SimpleCanleder_Year_Month .body li{background-color:lavender;list-style:none; width:30px; height:30px; overflow:hidden; margin-top:5px;margin-right:5px; float:left; display:inline; cursor:pointer}  

#SimpleCanleder_Year_Month .title li.cur, #SimpleCanleder_Year_Month .body li.cur{background-color:tomato;}  

#SimpleCanleder_Year_Month .title li.over, #SimpleCanleder_Year_Month .body li.over{background-color:lightblue;}  

#SimpleCanleder_Year_Month .title li .inner, #SimpleCanleder_Year_Month .body li .inner{padding-top:8px; text-align:center;}  

#SimpleCanleder_Year_Month .bottom{ height: 16px; padding-top: 5px; text-align: center }  

#SimpleCanleder_Year_Month .bottom button.clear{   background-color: gainsboro; border: 1px solid; font-size: 12px;}  

/style

script type="text/javascript"

(function($) {  

$.simpleCanleder = function(box, options){  

var _canlederBox = "#SimpleCanleder_Year_Month";  

var _title_ul_li = ".title li";  

box = $(box);  

var box_height = parseFloat( box.height());  

var box_width = parseFloat( box.width());  

var boxOffset = box.offset();  

var canlederBox = null;  

box.click(function(){  

canlederBox = $(_canlederBox);  

if($(canlederBox).size()  0){  

$(canlederBox).show();  

}else{  

_buildCanlederBox();  

$("body").append(canlederBox);

$(document).click(function(e){  

var pointX = e.pageX;

var pointY = e.pageY;

var $box  = canlederBox.data("box");

var isCanlederBox = $(e.target).parents(_canlederBox);  

if(canlederBox.is(":visible")  $box  e.target != $box[0]  isCanlederBox.size() = 0){  

var offset = canlederBox.offset();  

var top  = offset.top - 4;  

var left  = offset.left - 4;  

var height = top + parseFloat(canlederBox.outerHeight()) +  4;  

var width = left + parseFloat(canlederBox.outerWidth()) + 4;  

if(pointX  left  pointY  top   

pointX  width  pointY  height){  

}else{  

canlederBox.hide();  

}  

}  

});  

}

canlederBox.css({"top" : boxOffset.top + box_height + 6, "left": boxOffset.left});  

canlederBox.data("box", box);

_init();          

});   

function _init(){  

var now = new Date();  

var year = now.getFullYear();  

var month = now.getMonth() + 1;  

if(box.val()){  

year = box.val().split("-")[0] * 1;  

month = box.val().split("-")[1] * 1;  

}  

canlederBox.find(_title_ul_li).eq(1).find("div.inner").html(_getSelect(year));  

canlederBox.find(".body li").each(function(){  

if($(this).text() == month){  

$(this).addClass("cur");  

}else{  

$(this).removeClass("cur");  

};  

});  

}  

function _buildCanlederBox(){  

canlederBox = $("div/");  

canlederBox.attr("id", "SimpleCanleder_Year_Month");   

_buildTitle(canlederBox);  

_buildBody(canlederBox);  

canlederBox.append($("div/").addClass("clear"));  

_buildBottom(canlederBox);  

};  

function _buildTitle(canlederBox){  

var $title =  $("div/").addClass("title").append("ul/").appendTo(canlederBox);  

var $title_ul = $title.find("ul");  

for(var i = 0; i  3; i++){  

var $li = $("li/").append( $("div/").addClass("inner") );  

$li.hover(function(){  

$(this).addClass("over");     

}, function(){  

$(this).removeClass("over");  

});  

$title_ul.append($li);  

}  

var $title_ul_li = $title_ul.find("li");  

$title_ul_li.eq(0).click(function(){  

var year = $select.val();   //$select 在_getSelect()有定义  

canlederBox.find(_title_ul_li).eq(1).find("div.inner").html(_getSelect(--year));  

}).find("div.inner").text("  ");  

$title_ul_li.eq(1).addClass("middle").click(function(){  

})  

.find("div.inner").addClass("paddingTop").html(_getSelect());  

$title_ul_li.eq(2).click(function(){  

var year = $select.val();   //$select 在_getSelect()有定义  

canlederBox.find(_title_ul_li).eq(1).find("div.inner").html(_getSelect(++year));  

}).find("div.inner").text("  ");  

};  

function _buildBody(canlederBox){  

var $body =  $("div/").addClass("body").append("ul/").appendTo(canlederBox);  

var $body_ul = $body.find("ul");  

for(var i = 0; i  12; i++){  

var $inner = $("div/").addClass("inner").text(i+1);  

var $li = $("li/").append($inner).click(function(){  

var year = canlederBox.find(_title_ul_li).eq(1).find("select").val();  

var month = $(this).find("div.inner").text() * 1;  

month = month  10 ? "0" + month : month;  

canlederBox.data("box").val(year + "-" + month);  

canlederBox.hide();  

});  

$li.hover(function(){  

$(this).addClass("over");     

}, function(){  

$(this).removeClass("over");  

});  

$body_ul.append($li);  

}  

};  

function _buildBottom(canlederBox){  

var $button_clear = $("button/").addClass("clear").click(function(){  

canlederBox.data("box").val("");  

canlederBox.hide();  

}).text("清空");  

var $bottom = $("div/").addClass("bottom").append($button_clear);  

canlederBox.append($bottom);  

}; 

var $select = null;  

function _getSelect(year){  

if(!year){  

year = new Date().getFullYear();  

}

$select = $("select/");  

for(var i = 10; i =0; i--){  

$select.append($("option/").text(year - i ));  

}  

for(var i = 1; i = 10; i++){  

$select.append($("option/").text(year + i ));  

}  

$select.find("option").each(function(){  

if($(this).text() == year){  

$(this).attr("selected", "selected");  

}  

});  

return $select;  

};  

}; 

$.fn.extend({  

simpleCanleder: function(options) {  

options = $.extend({},options);  

this.each(function() {  

new $.simpleCanleder(this, options);  

});  

return this;  

}  

});  

})(jQuery); 

$(".test").simpleCanleder();  

/script

/body

/html

用javascript实现日历，高手帮忙

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312"

title网页特效|Linkweb.cn/Js|---一个很漂亮实用的日历/title

SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"

//创建一个数组,用于存放每个月的天数

function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11)

{

this[0] = m0;

this[1] = m1;

this[2] = m2;

this[3] = m3;

this[4] = m4;

this[5] = m5;

this[6] = m6;

this[7] = m7;

this[8] = m8;

this[9] = m9;

this[10] = m10;

this[11] = m11;

}

//实现月历

function calendar() {

var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec";

var today = new Date();

var thisDay;

var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

year = today.getYear() +1900;

thisDay = today.getDate();

if (((year % 4 == 0) (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29;

nDays = monthDays[today.getMonth()];

firstDay = today;

firstDay.setDate(1);

testMe = firstDay.getDate();

if (testMe == 2) firstDay.setDate(0);

startDay = firstDay.getDay();

document.write("div id='rili' style='position:absolute;width:140px;left:300px;top:100px;'")

document.write("TABLE width='217' BORDER='0' CELLSPACING='0' CELLPADDING='2' BGCOLOR='#0080FF'")

document.write("TRTDtable border='0' cellspacing='1' cellpadding='2' bgcolor='Silver'");

document.write("TRth colspan='7' bgcolor='#C8E3FF'");

var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");

var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");

var now = new Date();

document.writeln("FONT STYLE='font-size:9pt;Color:#330099'" + "公元 " + now.getYear() + "年" + monthNames[now.getMonth()] + " " + now.getDate() + "日 " + dayNames[now.getDay()] + "/FONT");

document.writeln("/TH/TRTRTH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'日/FONT/TH");

document.writeln("th bgcolor='#0080FF'FONT STYLE='font-size:9pt;Color:White'一/FONT/TH");

document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'二/FONT/TH");

document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'三/FONT/TH");

document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'四/FONT/TH");

document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'五/FONT/TH");

document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'六/FONT/TH");

document.writeln("/TRTR");

column = 0;

for (i=0; istartDay; i++) {

document.writeln("\nTDFONT STYLE='font-size:9pt' /FONT/TD");

column++;

}

for (i=1; i=nDays; i++) {

if (i == thisDay) {

document.writeln("/TDTD ALIGN='CENTER' BGCOLOR='#FF8040'FONT STYLE='font-size:9pt;Color:#ffffff'B")

}

else {

document.writeln("/TDTD BGCOLOR='#FFFFFF' ALIGN='CENTER'FONT STYLE='font-size:9pt;font-family:Arial;font-weight:bold;Color:#330066'");

}

document.writeln(i);

if (i == thisDay) document.writeln("/FONT/TD")

column++;

if (column == 7) {

document.writeln("TR");

column = 0;

}

}

document.writeln("TRTD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#0080FF'")

document.writeln("FORM NAME='clock' onSubmit='0'FONT STYLE='font-size:9pt;Color:#ffffff'")

document.writeln("现在时间:INPUT TYPE='Text' NAME='face' ALIGN='TOP'/FONT/FORM/TD/TR/TABLE")

document.writeln("/TD/TR/TABLE/div");

}

/SCRIPT

SCRIPT LANGUAGE="JavaScript"

var timerID = null;

var timerRunning = false;

function stopclock (){

if(timerRunning)

clearTimeout(timerID);

timerRunning = false;}

//显示当前时间

function showtime () {

var now = new Date();

var hours = now.getHours();

var minutes = now.getMinutes();

var seconds = now.getSeconds()

var timeValue = " " + ((hours 12) ? hours -12 :hours)

timeValue += ((minutes 10) ? ":0" : ":") + minutes

timeValue += ((seconds 10) ? ":0" : ":") + seconds

timeValue += (hours = 12) ? " 下午 " : " 上午 "

document.clock.face.value = timeValue;

timerID = setTimeout("showtime()",1000);//设置超时,使时间动态显示

timerRunning = true;}

function startclock () {

stopclock();

showtime();}

/SCRIPT

/head

body onLoad="startclock(); timerONE=window.setTimeout"

script language="JavaScript" type="text/javascript"

!--

calendar();

//--

/script

/body

/html

位置和颜色可以自己改

如何把js中的日历显示改成月历？

如果要选择到月份。劝你不要用js了多麻烦。两个下拉列表 年-月。

JavaScript月历问题

var gMonths=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");

var WeekDay=new Array("日","一","二","三","四","五","六");

var strToday="今天";

var strYear="年";

var strMonth="月";

var strDay="日";

var splitChar="-";

var startYear=2010;

var endYear=2020;

var dayTdHeight=12;

var dayTdTextSize=12;

var gcNotCurMonth="#E0E0E0";

var gcRestDay="#FF0000";

var gcWorkDay="#444444";

var gcMouseOver="#79D0FF";

var gcMouseOut="#F4F4F4";

var gcToday="#444444";

var gcTodayMouseOver="#6699FF";

var gcTodayMouseOut="#79D0FF";

var gdCtrl=new Object();

var goSelectTag=new Array();

var gdCurDate=new Date();

var giYear=gdCurDate.getFullYear();

var giMonth=gdCurDate.getMonth()+1;

var giDay=gdCurDate.getDate();

function $(){var elements=new Array();for(var i=0;iarguments.length;i++) {var element=arguments[i];if(typeof(arguments[i])=='string'){element=document.getElementById(arguments[i]);}if(arguments.length==1){return element;}elements.Push(element);}return elements;}

Array.prototype.Push=function(){var startLength=this.length;for(var i=0;iarguments.length;i++){this[startLength+i]=arguments[i];}return this.length;}

String.prototype.HexToDec=function(){return parseInt(this,16);}

String.prototype.cleanBlank=function(){return this.isEmpty()?"":this.replace(/\s/g,"");}

function checkColor(){var color_tmp=(arguments[0]+"").replace(/\s/g,"").toUpperCase();var model_tmp1=arguments[1].toUpperCase();var model_tmp2="rgb("+arguments[1].substring(1,3).HexToDec()+","+arguments[1].substring(1,3).HexToDec()+","+arguments[1].substring(5).HexToDec()+")";model_tmp2=model_tmp2.toUpperCase();if(color_tmp==model_tmp1 ||color_tmp==model_tmp2){return true;}return false;}

function $V(){return $(arguments[0]).value;}

function fPopCalendar(evt,popCtrl,dateCtrl){evt.cancelBubble=true;gdCtrl=dateCtrl;fSetYearMon(giYear,giMonth);var point=fGetXY(popCtrl);with($("calendardiv").style){left=point.x+"px";top=(point.y+popCtrl.offsetHeight+1)+"px";visibility='visible';zindex='99';position='absolute';}$("calendardiv").focus();}

function fSetDate(iYear,iMonth,iDay){var iMonthNew=new String(iMonth);var iDayNew=new String(iDay);if(iMonthNew.length2){iMonthNew="0"+iMonthNew;}if(iDayNew.length2){iDayNew="0"+iDayNew;}gdCtrl.value=iYear+splitChar+iMonthNew+splitChar+iDayNew;fHideCalendar();}

function fHideCalendar(){$("calendardiv").style.visibility="hidden";for(var i=0;igoSelectTag.length;i++){goSelectTag[i].style.visibility="visible";}goSelectTag.length=0;}

function fSetSelected(){var iOffset=0;var iYear=parseInt($("tbSelYear").value);var iMonth=parseInt($("tbSelMonth").value);var aCell=$("cellText"+arguments[0]);aCell.bgColor=gcMouseOut;with(aCell){var iDay=parseInt(innerHTML);if(checkColor(style.color,gcNotCurMonth)){iOffset=(innerHTML10)?-1:1;}iMonth+=iOffset;if(iMonth1){iYear--;iMonth=12;}else if(iMonth12){iYear++;iMonth=1;}}fSetDate(iYear,iMonth,iDay);}

function Point(iX,iY){this.x=iX;this.y=iY;}

function fBuildCal(iYear,iMonth){var aMonth=new Array();for(var i=1;i7;i++){aMonth[i]=new Array(i);}var dCalDate=new Date(iYear,iMonth-1,1);var iDayOfFirst=dCalDate.getDay();var iDaysInMonth=new Date(iYear,iMonth,0).getDate();var iOffsetLast=new Date(iYear,iMonth-1,0).getDate()-iDayOfFirst+1;var iDate=1;var iNext=1;for(var d=0;d7;d++){aMonth[1][d]=(diDayOfFirst)?(iOffsetLast+d)*(-1):iDate++;}for(var w=2;w7;w++){for(var d=0;d7;d++){aMonth[w][d]=(iDate=iDaysInMonth)?iDate++:(iNext++)*(-1);}}return aMonth;}

function fDrawCal(iYear,iMonth,iCellHeight,iDateTextSize){var colorTD=" bgcolor='"+gcMouseOut+"' bordercolor='"+gcMouseOut+"'";var styleTD=" valign='middle' align='center' style='height:"+iCellHeight+"px;font-weight:bolder;font-size:"+iDateTextSize+"px;";var dateCal="";dateCal+="tr";for(var i=0;i7;i++){dateCal+="td"+colorTD+styleTD+"color:#990099'"+WeekDay[i]+"/td";}dateCal+="/tr";for(var w=1;w7;w++){dateCal+="tr";for(var d=0;d7;d++){var tmpid=w+""+d;dateCal+="td"+styleTD+"cursor:pointer;' onclick='fSetSelected("+tmpid+")'";dateCal+="span id='cellText"+tmpid+"'/span";dateCal+="/td";}dateCal+="/tr";}return dateCal;}

function fUpdateCal(iYear,iMonth){var myMonth=fBuildCal(iYear,iMonth);var i=0;for(var w=1;w7;w++){for(var d=0;d7;d++){with($("cellText"+w+""+d)){parentNode.bgColor=gcMouseOut;parentNode.borderColor=gcMouseOut;parentNode.onmouseover=function(){this.bgColor=gcMouseOver;};parentNode.onmouseout=function(){this.bgColor=gcMouseOut;};if(myMonth[w][d]0){style.color=gcNotCurMonth;innerHTML=Math.abs(myMonth[w][d]);}else{style.color=((d==0)||(d==6))?gcRestDay:gcWorkDay;innerHTML=myMonth[w][d];if(iYear==giYear iMonth==giMonth myMonth[w][d]==giDay){style.color=gcToday;parentNode.bgColor=gcTodayMouseOut;parentNode.onmouseover=function(){this.bgColor=gcTodayMouseOver;};parentNode.onmouseout=function(){this.bgColor=gcTodayMouseOut;};}}}}}}

function fSetYearMon(iYear,iMon){$("tbSelMonth").options[iMon-1].selected=true;for(var i=0;i$("tbSelYear").length;i++){if($("tbSelYear").options[i].value==iYear){$("tbSelYear").options[i].selected=true;}}fUpdateCal(iYear,iMon);}

function fPrevMonth(){var iMon=$("tbSelMonth").value;var iYear=$("tbSelYear").value;if(--iMon1){iMon=12;iYear--;}fSetYearMon(iYear,iMon);}

function fNextMonth(){var iMon=$("tbSelMonth").value;var iYear=$("tbSelYear").value;if(++iMon12){iMon=1;iYear++;}fSetYearMon(iYear,iMon);}

function fGetXY(aTag){var oTmp=aTag;var pt=new Point(0,0);do{pt.x+=oTmp.offsetLeft;pt.y+=oTmp.offsetTop;oTmp=oTmp.offsetParent;}while(oTmp.tagName.toUpperCase()!="BODY");return pt;}

function getDateDiv(){var noSelectForIE="";var noSelectForFireFox="";if(document.all){noSelectForIE="onselectstart='return false;'";}else{noSelectForFireFox="-moz-user-select:none;";}var dateDiv="";dateDiv+="div id='calendardiv' onclick='event.cancelBubble=true' "+noSelectForIE+" style='"+noSelectForFireFox+"position:absolute;z-index:99;visibility:hidden;border:1px solid #999999;'";dateDiv+="table border='0' bgcolor='#E0E0E0' cellpadding='1' cellspacing='1' ";dateDiv+="tr";dateDiv+="tdinput type='button' id='PrevMonth' value='' style='height:20px;width:20px;font-weight:bolder;' onclick='fPrevMonth()'";dateDiv+="/tdtdselect id='tbSelYear' style='border:1px solid;' onchange='fUpdateCal($V(\"tbSelYear\"),$V(\"tbSelMonth\"))'";for(var i=startYear;iendYear;i++){dateDiv+="option value='"+i+"'"+i+strYear+"/option";}dateDiv+="/select/tdtd";dateDiv+="select id='tbSelMonth' style='border:1px solid;' onchange='fUpdateCal($V(\"tbSelYear\"),$V(\"tbSelMonth\"))'";for(var i=0;i12;i++){dateDiv+="option value='"+(i+1)+"'"+gMonths[i]+"/option";}dateDiv+="/select/tdtd";dateDiv+="input type='button' id='NextMonth' value='' style='height:20px;width:20px;font-weight:bolder;' onclick='fNextMonth()'";dateDiv+="/td";dateDiv+="/trtr";dateDiv+="td align='center' colspan='4'";dateDiv+="div style='background-color:#cccccc'table width='100%' border='0' cellpadding='3' cellspacing='1'";dateDiv+=fDrawCal(giYear,giMonth,dayTdHeight,dayTdTextSize);dateDiv+="/table/div";dateDiv+="/td";dateDiv+="/trtrtd align='center' colspan='4' nowrap";dateDiv+="span style='cursor:pointer;font-weight:bolder;' onclick='fSetDate(giYear,giMonth,giDay)' onmouseover='this.style.color=\""+gcMouseOver+"\"' onmouseout='this.style.color=\"#000000\"'"+strToday+":"+giYear+strYear+giMonth+strMonth+giDay+strDay+"/span";dateDiv+="/tr/tr";dateDiv+="/table/div";return dateDiv;}

with(document){onclick=fHideCalendar;write(getDateDiv());}

td 费用发生日期：*/td

tdlabel

input type="text" name="date" style="border:1px solid #999;" onClick="fPopCalendar(event,this,this)" onFocus="this.select()" readonly="readonly" /

*

/label/td

请教下各位，通过javascript来实现 有某年第几周 得到 这周的开始日期 和结束日期，怎么写啊？

html

head

title用JavaScript编写动态月历/title

script type="text/javascript"

!--

//函数是每个month对象的方法

function getFirstDay(theYear, theMonth){

var firstDate = new Date(theYear,theMonth,1);

return firstDate.getDay();

}

//每个月的天数

function getMonthLen(theYear, theMonth) {

var oneHour = 1000 * 60 * 60;

var oneDay = oneHour * 24;

var thisMonth = new Date(theYear, theMonth, 1);

var nextMonth = new Date(theYear, theMonth + 1, 1);

var len = Math.ceil((nextMonth.getTime() - thisMonth.getTime() - oneHour)/oneDay);

return len;

}

//修正Y2K问题

function getY2KYear(today) {

var yr = today.getYear();

return ((yr 100) ? yr + 1900 : yr);

}

function populateFields(form) {

//为用户最后选择初始化变量

var theMonth = form.chooseMonth.selectedIndex;

var theYear = form.chooseYear.options[form.chooseYear.selectedIndex].value;

//初始化与日期相关的变量

//选择月份的第一天

var firstDay = getFirstDay(theYear, theMonth);

//下列循环所需要的TD...\/TD标记的总数

var howMany = getMonthLen(theYear, theMonth);

//设置年份和月份

form.oneMonth.value = theYear+"年"+theMonths[theMonth];

//填充表域

for (var i = 0; i 42; i++) {

if (i firstDay || i = (howMany + firstDay)) {

// 在实际日期的前后清空表域

form.oneDay[i].value = "";

} else {

// 输入日期值

form.oneDay[i].value = i - firstDay + 1;

}

}

}

//--

/script

/head

body

centerh1生成的月历（动态）/h1/center

hr /

script type="text/javascript"

!--

//初始化变量

//创建month对象名数组

theMonths = new Array("1月", "2月", "3月", "4月", "5月","6月",

"7月", "8月", "9月", "10月", "11月", "12月");

// 填充表域

var oneField = "input type='text' name='oneDay' size='2' onfocus=''";

//开始组合HTML表格

var content = "formcentertable border='1'";

//在月历顶部显示年份和月份

content += "trth colspan='7'input type='text'name='oneMonth'\/th\/tr";

//列头的星期

content += "trth 日 \/thth 一 \/thth 二 \/th";

content += "th 三 \/thth 四 \/thth 五 \/th";

content += "th 六 \/th\/trtr";

//布局6行

for (var i = 1; i 43; i++) {

content += "td align='middle'" + oneField + "\/td";

if (i % 7 == 0) {

content += "\/trtr";

}

}

content += "\/table";

// 向文档写整个表的HTML

document.write(content);

//--

/script

select name="chooseYear"

option value="2003" selected="selected"2003年/option

option value="2004"2004年/option

option value="2005"2005年/option

option value="2006"2006年/option

option value="2007"2007年/option

option value="2008"2008年/option

option value="2009"2009年/option

option value="2010"2010年/option

option value="2011"2011年/option

/select

select name="chooseMonth"

option value="January" selected="selected"1月/option

option value="February"2月/option

option value="March"3月/option

option value="April"4月/option

option value="May"5月/option

option value="June"6月/option

option value="July"7月/option

option value="August"8月/option

option value="September"9月/option

option value="October"10月/option

option value="November"11月/option

option value="December"12月/option

/select

br /

input type="button" name="updater" value="更新月历" onclick="populateFields(this.form)" /

/form

/body

/html

求一款js做的时间日历控件？

这是我找到的一个js做的日历，不知道是不是你要的，里面有包含时间，其实在日历里面加时间也是比较简单的，只要调用DATE的方法就可以了，希望对你有用。下面是代码段，效果图附上。

html

head

SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"

//定义月历函数

function calendar() {

var today = new Date(); //创建日期对象

year = today.getYear(); //读取年份

thisDay = today.getDate(); //读取当前日

//创建每月天数数组

var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

//如果是闰年，2月份的天数为29天

if (((year % 4 == 0)  (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29;

daysOfCurrentMonth = monthDays[today.getMonth()]; //从每月天数数组中读取当月的天数

firstDay = today;//复制日期对象

firstDay.setDate(1); //设置日期对象firstDay的日为1号

startDay = firstDay.getDay(); //确定当月第一天是星期几

//定义周日和月份中文名数组

var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");

var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");

//创建日期对象

var newDate = new Date();

//创建表格

document.write("TABLE BORDER='0' CELLSPACING='0' CELLPADDING='2' ALIGN='CENTER' BGCOLOR='#0080FF'")

document.write("TRTDtable border='0' cellspacing='1' cellpadding='2' bgcolor='#88FF99'");

document.write("TRth colspan='7' bgcolor='#C8E3FF'");

//显示当前日期和周日

document.writeln("FONT STYLE='font-size:9pt;Color:#FF0000'" + newDate.getYear() + "年" + monthNames[newDate.getMonth()] + " " + newDate.getDate() + "日 " + dayNames[newDate.getDay()] + "/FONT");

//显示月历表头

document.writeln("/TH/TRTRTH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'日/FONT/TH");

document.writeln("th bgcolor='#0080FF'FONT STYLE='font-size:9pt;Color:White'一/FONT/TH");

document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'二/FONT/TH");

document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'三/FONT/TH");

document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'四/FONT/TH");

document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'五/FONT/TH");

document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'六/FONT/TH");

document.writeln("/TRTR");

//显示每月前面的"空日"

column = 0;

for (i=0; istartDay; i++) {

document.writeln(" TDFONT STYLE='font-size:9pt' /FONT/TD");

column++;

}

//如果是当前日就突出显示(红色)，否则正常显示(黑色)

for (i=1; i=daysOfCurrentMonth; i++) {

if (i == thisDay) {

document.writeln("/TDTD ALIGN='CENTER'FONT STYLE='font-size:9pt;Color:#ff0000'B")

}

else {

document.writeln("/TDTD BGCOLOR='#88FF99' ALIGN='CENTER'FONT STYLE='font-size:9pt;font-family:Arial;font-weight:bold;Color:#000000'");

}

document.writeln(i);

if (i == thisDay) document.writeln("/FONT/TD")

column++;

if (column == 7) {

document.writeln("TR");

column = 0;

}

}

document.writeln("TRTD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#0080FF'")

document.writeln("FORM NAME='time' onSubmit='0'FONT STYLE='font-size:9pt;Color:#ffffff'")

//显示当前时间

document.writeln("当前时间:INPUT TYPE='Text' NAME='textbox' ALIGN='TOP'/FONT/TD/TR/TABLE")

document.writeln("/TD/TR/TABLE/FORM");

}

/SCRIPT

SCRIPT LANGUAGE="JavaScript"

//初始化控制变量

var timerID = null;

var timerRunning = false;

//定义时间显示函数

function stoptime (){

if(timerRunning)

clearTimeout(timerID);

timerRunning = false;}

//定义显示时间函数

function showtime () {

var newDate = new Date();

var hours = newDate.getHours();

var minutes = newDate.getMinutes();

var seconds = newDate.getSeconds()

var timeValue = " " + ((hours 12) ? hours -12 :hours)

timeValue += ((minutes  10) ? ":0" : ":") + minutes

timeValue += ((seconds  10) ? ":0" : ":") + seconds

timeValue += (hours = 12) ? " 下午 " : " 上午 "

document.time.textbox.value = timeValue;

timerID = setTimeout("showtime()",1000);//设置超时,使时间动态显示

timerRunning = true;}

//显示当前时间

function starttime () {

stoptime();

showtime();}

/SCRIPT

/head

BODY onLoad="starttime()" TEXT="#000000" TOPMARGIN="0"

script language="JavaScript" type="text/javascript"

calendar(); //显示月历

/script

/BODY

/html