ryuken1982
新新人类
帖子
2
精华
0
无忧币 132
积分 10
阅读权限 20
来自 (保密)
|
发表于:2007-4-16 14:28
标题：javascript 日历
＜上一帖 |
下一帖＞
所有有关“Web开发”的资料
来源版块: Web开发
压缩包内文件格式:
附件来源:
运行平台:
是否经本人验证: 是
附件性质:
详细说明: 兼容IE、FireFox及Opera
function $(element) {
return typeof( element ) != "string" ? element : document.getElementById( element );
}
Date.prototype.toString = function(){
var year = this.getFullYear();
var month = this.getMonth()+1;
month = month > 9 ? month : "0"+month;
var date = this.getDate() > 9 ? this.getDate() : "0"+this.getDate();
return year + "-" + month + "-" + date;
}
Date.prototype.equals = function(date){
return this.getFullYear()==date.getFullYear() && this.getMonth()==date.getMonth() && this.getDate() == date.getDate();
}
var Browser = {
isIE : !!(window.attachEvent && !window.opera),
isOpera : !!window.opera,
isWebKit : navigator.userAgent.indexOf('AppleWebKit/') > -1,
isGecko : navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1
};
var Position = {
realOffset : function(element){
var p = { x element.offsetLeft || 0 ), y element.offsetTop || 0 ) };
while( element = element.offsetParent ){
p.x += ( element.offsetLeft || 0 );
p.y += ( element.offsetTop || 0 );
if( ( Browser.isGecko || Browser.isIE ) && element.id == "calendar" ) {
var calendarBorderWidth = 5;
p.x += calendarBorderWidth;
p.y += calendarBorderWidth;
}
}
return p;
}
};
var Calendar = {
today : new Date(),
selectedDate : new Date(),
currentDate : new Date(),
source : null, //调用日历的控件
load : function(){
document.write( '<ul id="calendar" ><li id="calendarLi"></li></ul>' );
document.write( '<ul id="yearSelecter" ><li id="yearSelecterLi"></li></ul>' );
document.write( '<ul id="monthSelecter" ></ul>' );
var html = '<table id="calendarTB" border="1" cellSpacing="1" cellPadding="0">';
var controlerHtml = '<tr id="calendarControler"><td colspan="2"><input title="上一月" id="preMonth" type="button" onclick="Calendar.update( Calendar.currentDate.getFullYear(), Calendar.currentDate.getMonth() - 1 )"/></td>'+
'<td colspan="3"><a href="##" id="calendarYear"></a> <a href="##" id="calendarMonth"></a></td>'+
'<td colspan="2"><input title="下一月" id="nextMonth" type="button" onclick="Calendar.update( Calendar.currentDate.getFullYear(), Calendar.currentDate.getMonth() + 1 )"/></td></tr>';
var headerHtml = '<tr id="calendarHeader"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>';
var bodyHtml = "";
for(i=0; i<6; i++){
bodyHtml += "<tr>";
for(j=0; j<7; j++){
if( ( i*7+j )>39 ) {break;}
if( j==0 || j==6 ) { bodyHtml += '<td class="calendarDate"><a href="##" id="date_'+ ( i*7+j ) + '" class="weekend"></a></td>';}
else { bodyHtml += '<td class="calendarDate"><a href="##" id="date_'+ ( i*7+j ) +'" class="weekend"></a></td>'; }
}
if( i==5 ) {break;}
bodyHtml += "</tr>";
}
bodyHtml += '<td colspan="2" id="calendarClose" title="按ESC键关闭">关闭</td></tr>';
todayHtml = '<tr><td colspan="7" id="footer"><a href="##" onclick="Calendar.selecteToday( );return false;">今天是'+this.today.getFullYear()+"年" +( this.today.getMonth()+1 ) +"月" + this.today.getDate()+'日</a></td></tr>';
html += controlerHtml + headerHtml + bodyHtml + todayHtml + '</table>';
$("calendarLi").innerHTML = html;
$("calendarYear").onclick = this.showYearSelecter;
$("calendarMonth").onclick = this.showMonthSelecter;
$("calendarClose").onclick = this.close;
$("calendar").onclick = this.cancelBubble;
$("yearSelecter").onclick = this.cancelBubble;
$("monthSelecter").onclick = this.cancelBubble;
this.attachEvent("click", document.documentElement, this.close );
this.attachEvent("keydown", document.documentElement, this.keyDown );
},
update : function( yy, mm ){
var date = new Date( yy, mm, 1 );
yy = date.getFullYear();
mm = date.getMonth();
Calendar.currentDate = new Date( date.getTime() );
$("calendarYear").innerHTML = yy + "年";
$("calendarMonth").innerHTML = ( mm + 1 > 9 ? ( mm + 1) : '0' + (mm + 1) ) + "月";
date.setDate( date.getDate() - date.getDay() - 1 ); //设为起始日期
for( i=0; i<6; i++ ){
for( j=0; j<7; j++ ){
if( ( i*7+j )>39 ) {break;}
var _date = $( "date_" + ( i*7+j ) );
_date.date = new Date( date.setDate( date.getDate() +1 ) )
_date.innerHTML = _date.date.getDate();
if(_date.date.getMonth() != mm){
_date.className = "calendarGrayDate";
}else if( _date.date.equals( Calendar.selectedDate )){
_date.className = "calendarSelected";
}else if( _date.date.equals( Calendar.today ) ){
_date.className = "calendarToday";
}else{
_date.className = ""
}
_date.onclick = this.selecteDate;
}
}
},
//调用时参数必须为event才能在firefox下支持
show : function(evt){
evt = evt || window.event;
var srcElement = evt.srcElement || evt.target;
Calendar.source = srcElement;
srcElement.blur();
if(window.event) {evt.cancelBubble = true;}
else { evt.stopPropagation(); }
var date = srcElement.value != "" ? Calendar.stringToDate( srcElement.value ) : new Date();
Calendar.selectedDate = new Date( date.getTime() );
Calendar.update( date.getFullYear(), date.getMonth() );
var calendar = $("calendar");
var p = Position.realOffset( srcElement );
calendar.style.left = p.x + "px";
calendar.style.top = p.y + srcElement.offsetHeight + "px";
calendar.style.display = "block";
},
showYearSelecter : function(evt){
$("monthSelecter").style.display = "none";
evt = evt || window.event;
var srcElement = evt.srcElement || evt.target;
var yearSelecter = $("yearSelecter");
var html = '<ul>';
var startYear = 1940;
var endYear = startYear + 100;
for( i=startYear; i<endYear; i++ ){
html += i != startYear && i % 10 == 0 ? '</ul><ul>' : "";
html += '<li><a href="##" onclick="Calendar.selecteYear(' + i + ', event );return false;" ' + ( Calendar.currentDate.getFullYear() == i ? 'class="calendarSelected" ' : ( Calendar.today.getFullYear() == i ? 'class= "calendarToday" ' : '' ) ) +'>' + i + '</a></li>';
}
html += "</ul>";
$("yearSelecterLi").innerHTML = html;
var p = Position.realOffset( srcElement );
$("yearSelecter").style.left = p.x + "px";
$("yearSelecter").style.top = p.y + srcElement.offsetHeight + "px";
yearSelecter.style.display = "block";
return false;
},
showMonthSelecter : function(evt){
$("yearSelecter").style.display = "none";
evt = evt || window.event;
var srcElement = evt.srcElement || evt.target;
var monthSelecter = $("monthSelecter");
var months = ["一","二","三","四","五","六","七","八","九","十","十一","十二"];
var html = "";
for( i=0; i<12; i++){
if( i != Calendar.currentDate.getMonth() ){ html += '<li><a href="##" onclick="Calendar.selecteMonth( '+ i + ' , event);return false;">'+ months + '月</a></li>'; }
else{ html += '<li><a href="##" class="calendarSelected" onclick="Calendar.selecteMonth( '+ i + ' , event);return false">' + months + '月</a></li>'; }
}
monthSelecter.innerHTML = html;
var p = Position.realOffset( srcElement );
$("monthSelecter").style.left = p.x + "px";
$("monthSelecter").style.top = p.y + srcElement.offsetHeight + "px";
monthSelecter.style.display = "block";
return false;
},
selecteToday : function(){
Calendar.source.value = new Date();
Calendar.selectedDate = new Date();
Calendar.close();
},
selecteYear : function( year, evt ){
evt = evt || window.event;
var srcElement = evt.srcElement || evt.target;
Calendar.update( year, Calendar.currentDate.getMonth() );
$("yearSelecter").style.display = "none";
},
selecteMonth : function( month, evt ){
evt = evt || window.event;
var srcElement = evt.srcElement || evt.target;;
Calendar.update( Calendar.currentDate.getFullYear(), month );
$("monthSelecter").style.display = "none";
},
selecteDate : function(evt){
evt = evt || window.event;
var srcElement = evt.srcElement || evt.target;;
Calendar.source.value = srcElement.date;
Calendar.selectedDate = new Date( srcElement.date.getTime() );
Calendar.close();
return false;
},
attachEvent : function(type, target, handler, owner){
var eventHandler = handler;
if(owner){
eventHandler = function(e){
handler.call(owner, e);
}
}
if(window.document.all) { target.attachEvent("on"+type, eventHandler ); }
else { target.addEventListener(type, eventHandler, false); }
},
close : function(){
$("calendar").style.display = "none" ;
$("yearSelecter").style.display = "none";
$("monthSelecter").style.display = "none";
},
keyDown : function(evt){
evt = evt || wiondw.event;
if(evt.keyCode != 27) return;
if( $("monthSelecter").style.display != "none" ) $("monthSelecter").style.display = "none";
else if( $("yearSelecter").style.display != "none" ) $("yearSelecter").style.display = "none";
else if( $("calendar").style.display != "none" ) $("calendar").style.display = "none";
},
stringToDate : function( strDate ){
strDate = strDate.split( "-" );
var date = new Date( strDate[0], strDate[1] - 1, strDate[2] );
return date;
},
cancelBubble : function(evt){
evt = evt ? evt : window.event;
if(window.event) {evt.cancelBubble = true;}
else { evt.stopPropagation(); }
}
}
Calendar.load();
[ 本帖最后由 ryuken1982 于 2007-5-25 20:27 编辑 ]
 附件(查看下载说明):
Calendar.rar (2007-5-25 20:27,大小:4.3 K)
该附件被下载 23 次
您下载该主题帖内所有附件同时将被扣掉2点无忧币
查看分数政策说明
|
论坛活动：测测你对IT技术大会的了解指数(赠微软礼品、无忧币) |
|
| 诚征版主 | 版主堂 | 意见建议 | 大史记 | 论坛地图