有关js的日历控件大全

经常会用到日历控件，现在就整理一下，好看即好用的日历控件

第一种方案

1.建立一个JS文件：Calendar.js

<!--
var cal;
var isFocus=false; //是否为焦点
//function SelectDate(obj,strFormat) //两个参数改为只传一个
function SelectDate(obj)
...{
    var date = new Date();
    var by = date.getFullYear()-10; //最小值 → 10 年前
    var ey = date.getFullYear()+10; //最大值 → 10 年后
    cal = (cal==null) ? new Calendar(by, ey, 0) : cal;    //初始化为中文版，1为英文版
    //cal.dateFormatStyle = strFormat; // 默认显示格式为:yyyy-MM-dd ,还可显示 yyyy/MM/dd
    cal.show(obj);
}
/**//* 返回日期 */
String.prototype.toDate = function(style)...{
var y = this.substring(style.indexOf('y'),style.lastIndexOf('y')+1);//年
var m = this.substring(style.indexOf('M'),style.lastIndexOf('M')+1);//月
var d = this.substring(style.indexOf('d'),style.lastIndexOf('d')+1);//日
if(isNaN(y)) y = new Date().getFullYear();
if(isNaN(m)) m = new Date().getMonth();
if(isNaN(d)) d = new Date().getDate();
var dt ;
eval ("dt = new Date('"+ y+"', '"+(m-1)+"','"+ d +"')");
return dt;
}
/**//* 格式化日期 */
Date.prototype.format = function(style)...{
var o = ...{
    "M+" : this.getMonth() + 1, //month
    "d+" : this.getDate(),      //day
    "h+" : this.getHours(),     //hour
    "m+" : this.getMinutes(),   //minute
    "s+" : this.getSeconds(),   //second
    "w+" : "天一二三四五六".charAt(this.getDay()),   //week
    "q+" : Math.floor((this.getMonth() + 3) / 3), //quarter
    "S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(style))...{
    style = style.replace(RegExp.$1,
    (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for(var k in o)...{
    if(new RegExp("("+ k +")").test(style))...{
      style = style.replace(RegExp.$1,
        RegExp.$1.length == 1 ? o[k] :
        ("00" + o[k]).substr(("" + o[k]).length));
    }
}
return style;
};

/**//*
* 日历类
* @param   beginYear 1990
* @param   endYear   2010
* @param   lang      0(中文)|1(英语) 可自由扩充
* @param   dateFormatStyle "yyyy-MM-dd";
*/
function Calendar(beginYear, endYear, lang, dateFormatStyle)...{
this.beginYear = 1990;
this.endYear = 2010;
this.lang = 0;            //0(中文) | 1(英文)
this.dateFormatStyle = "yyyy-MM-dd";

if (beginYear != null && endYear != null)...{
    this.beginYear = beginYear;
    this.endYear = endYear;
}
if (lang != null)...{
    this.lang = lang
}

if (dateFormatStyle != null)...{
    this.dateFormatStyle = dateFormatStyle
}

this.dateControl = null;
this.panel = this.getElementById("calendarPanel");
this.container = this.getElementById("ContainerPanel");
this.form = null;

this.date = new Date();
this.year = this.date.getFullYear();
this.month = this.date.getMonth();


this.colors = ...{
"cur_word"      : "#FFFFFF", //当日日期文字颜色
"cur_bg"        : "#83A6F4", //当日日期单元格背影色
"sel_bg"        : "#FFCCCC", //已被选择的日期单元格背影色
"sun_word"      : "#FF0000", //星期天文字颜色
"sat_word"      : "#0000FF", //星期六文字颜色
"td_word_light" : "#333333", //单元格文字颜色
"td_word_dark" : "#CCCCCC", //单元格文字暗色
"td_bg_out"     : "#EFEFEF", //单元格背影色
"td_bg_over"    : "#FFCC00", //单元格背影色
"tr_word"       : "#FFFFFF", //日历头文字颜色
"tr_bg"         : "#666666", //日历头背影色
"input_border<sp>