经常会用到日历控件,现在就整理一下,好看即好用的日历控件
第一种方案
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>