900字范文 > js做日历控件类似博客的（动态填写日期）

js做日历控件类似博客的（动态填写日期）

时间：2022-08-18 09:21:52

页面：

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

年度计划季度计划<span id="PreMonth" style="text-decoration:underline; ">上月计划</span> <span id="NextMonth" style="text-decoration:underline; ">下月计划</span>

123456789101112</td>

</tr>

<tr>

<p style="text-align: right">备用栏如返回等按钮</p></td>

</tr>

</table>

script代码：

// var $ = function (id) {

// return "string" == typeof id ? document.getElementById(id) : id;

// };

function GetElement(id)

{

return document.getElementById(id);

}

var Class = {

create: function() {

return function() {

this.initialize.apply(this, arguments);

}

};

var Extend = function(destination, source) {

for (var property in source) {

destination[property] = source[property];

}

return destination;

};

var Calendar = Class.create();

Calendar.prototype = {

initialize: function(container,options) {

this.Days = [];//日期对象列表

this.Weeks = [];//周对象列表

this.SetOptions(options);

this.Year = this.options.Year || new Date().getFullYear();

this.Month = this.options.Month || new Date().getMonth() + 1;

this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null;

this.onSelectDay = this.options.onSelectDay;

this.onToday = this.options.onToday;

this.onFinish = this.options.onFinish;

//GetElement("ThisDay").innerHTML="今日计划 "+new Date().toLocaleDateString();//自己定义的

GetElement("ThisMonth").innerHTML="本月计划 "+this.Year+"年"+this.Month+"月";//自己定义的

this.Draw();

//设置默认属性

SetOptions: function(options) {

this.options = {//默认值

Year:0,//显示年

Month:0,//显示月

SelectDay:null,//选择日期

onSelectDay:function(){},//在选择日期触发

onToday:function(){},//在当天日期触发

onFinish:function(){}//日历画完后触发

};

Extend(this.options, options || {});

//当前月

NowMonth: function() {

this.PreDraw(new Date());

//上一月

PreMonth: function() {

this.PreDraw(new Date(this.Year, this.Month - 2, 1));

//下一月

NextMonth: function() {

this.PreDraw(new Date(this.Year, this.Month, 1));

//上一年

PreYear: function() {

this.PreDraw(new Date(this.Year - 1, this.Month - 1, 1));

//下一年

NextYear: function() {

this.PreDraw(new Date(this.Year + 1, this.Month - 1, 1));

//根据日期画日历

PreDraw: function(date) {

//再设置属性

this.Year = date.getFullYear(); this.Month = date.getMonth() + 1;

//重新画日历

if(this.Year==new Date().getFullYear() && this.Month==new Date().getMonth()+1){

GetElement("ThisMonth").innerHTML="本月计划 "+this.Year+"年"+this.Month+"月";

}

else{

GetElement("ThisMonth").innerHTML="选中月计划 "+this.Year+"年"+this.Month+"月";

}

this.Draw();

//画日历

Draw: function() {

//用来保存日期列表

var arr = [];

//用当月第一天在一周中的日期值作为当月离第一天的天数

for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push(0); }

//用当月最后一天在一个月中的日期值作为当月的天数

for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); }

/*以下为日期相关*/

//清空原来的日期对象列表

this.Days = [];

var day=1;

while(arr.length){

//locke加的

var d = arr.shift();

if(d){

//把日期数字写到td中

GetElement("date"+day).innerHTML=d;

//下面是切换td的class

if(GetElement("date"+day).className=="style1010_locke")

GetElement("date"+day).className="style1010";

else if(GetElement("date"+day).className=="style1010_2_locke")

GetElement("date"+day).className="style1010_2";

this.Days[d]=GetElement("date"+day);

}

else{

GetElement("date"+day).innerHTML=" ";

if(GetElement("date"+day).className=="style1010")

GetElement("date"+day).className="style1010_locke";

else if(GetElement("date"+day).className=="style1010_2")

GetElement("date"+day).className="style1010_2_locke";

}

day=day+1;

}

for(var i=day;i<38;i++)

{

if(GetElement("date"+i).className=="style1010")

GetElement("date"+i).className="style1010_locke";

else if(GetElement("date"+i).className=="style1010_2")

GetElement("date"+i).className="style1010_2_locke";

GetElement("date"+i).innerHTML=" ";

}

/*以下为星期相关*/

this.Weeks = [];

var weekStart=getYearWeek(this.Year,this.Month,"1");

for( var j=1;j<6;j++)

{

if(GetElement("week"+j).className=="style1010_locke")

GetElement("week"+j).className="style1010";

else if(GetElement("week"+j).className=="style1010_2_locke")

GetElement("week"+j).className="style1010_2";

GetElement("week"+j).innerHTML=weekStart + j - 1;

this.Weeks[j]=GetElement("week"+j);

}

if(GetElement("date36").innerHTML!=" ")

{

if(GetElement("week6").className=="style1010_locke")

GetElement("week6").className="style1010";

else if(GetElement("week6").className=="style1010_2_locke")

GetElement("week6").className="style1010_2";

GetElement("week6").innerHTML=weekStart + 5;

this.Weeks[6]=GetElement("week"+6);

}

else

{

if(GetElement("week6").className=="style1010")

GetElement("week6").className="style1010_locke";

else if(GetElement("week6").className=="style1010_2")

GetElement("week6").className="style1010_2_locke";

GetElement("week6").innerHTML="&nbsp";

}

//附加程序

this.onFinish();

}

};

</script>

调用（页面加载后，放在</body>前，</form>后）：

var cale = new Calendar("table1",{

SelectDay: new Date().setDate(new Date(this.Year, this.Month, 0).getDate()),

onSelectDay: function(o){ o.className = "onSelect"; },

onToday: function(o){ o.className = "onToday"; },

onFinish: function(){

var flag=JudgDay(this.Year,this.Month,new Date(this.Year, this.Month, 0).getDate());

if(flag.length>0 && flag[0]!=NaN)

{

for(var i = 0, len = flag.length; i < len; i++){

this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' οnclick=\"setDay('"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>";

}

flag=[];

}

//周链接

for(var j=1,len=GetElement("week6").innerHTML!=" "?7:6;j<len;j++)

{

var isWeekLink=locke.isWeekLink(this.Weeks[j].innerHTML).value;

if(isWeekLink=="true"){

this.Weeks[j].innerHTML = "<a style=\"color:#FFFF00; text-decoration:underline;\" href='javascript:void(0);' οnclick=\"setWeek('"+this.Weeks[j].innerHTML+"');return false;\">" + this.Weeks[j].innerHTML + "</a>";

}

});

GetElement("PreMonth").onclick = function(){ cale.PreMonth(); } //其中PreMonth为一个html空间的ID

GetElement("NextMonth").onclick = function(){ cale.NextMonth(); }

附上跳转函数：

//选中某天，相应跳转

function setDay(selected_date)

{

if(selected_date){

document.all.DayPlanArea.src="DayPlan.aspx?dateS="+selected_date;

}

//选中某周，相应跳转