jQuery로 작성된 캘린더(캘린더 스타일 및 기능 포함)_jquery

复代码码 代码如下:

<머리>

<제목>



<본문>

사용:

按钮调용:id="button" type= "button" onclick="c.showMoreDay = true; c.show(getObjById('btntxt'), '1982-1-1', this)" />


id="button3" type="button" onclick="c.showMoreDay = true; c.show(this, getObjById('btntxt3'))" />

需要的jQuery文件

复代代码 代码如下:

function Calendar(objName)
{
this.style = {
borderColor : "#909eff", //边框颜色
headerBackColor : "#909EFF", //表头背景颜色
headerFontColor : "#ffffff", //表头字体颜色
bodyBarBackColor : "#f4f4f4", //日历标题背景色
bodyBarFontColor : "#000000", //日历标题字体色
bodyBackColor : "#ffffff", //日历背景色
bodyFontColor : "#000000", //日历字体色
bodyHolidayFontColor : "#ff0000", //假日字体色
watermarkColor : "#d4d4d4", //背景水印色
moreDayColor : "#cccccc"
};
this.showMoreDay = false; //是否显示上月和下月的日期
this.Obj = objName;
this.date = null;
this.mouseOffset = null;
this.dateInput = null;
this.timer = null;
};
Calendar.prototype.toString = function()
{
var str = this.getStyle();
str += '

\n';
str += '

';
str += this.getHeader();
str += this.getBody();
str += '

';
str을 반환합니다;
};
Calendar.prototype.getStyle = function()
{
var str = 'n';
str을 반환합니다;
};
Calendar.prototype.getHeader = function()
{
var str = '< tr Author="alin" align="center">n';
str = 'n';
str = 'n';
str = 'n';
str = 'n';
str = 'n';
str = 'n';
str = '

<<

<

0

0

>

>>

n';
str을 반환합니다;
};
Calendar.prototype.getBody = function()
{
var n = 0;
var str = this.getBodyBar();
str = 'n';
for(i = 0; i {
str = '';
for(j = 0; j {
str = 'n';
}
str = '';
}
str = 'n';
str = 'str을 반환합니다;
};
Calendar.prototype.getBodyBar = function()
{
var str = '

今천：' new Date().toFormatString("yyyy年mm月dd日") '

n';
var day = new Array('日','一','이','삼','사','五','六');
for(i = 0; i {
str = 'n';
}
str = '

' 일[i] '

';
str을 반환합니다;
}
Calendar.prototype.getYearMenu = 함수(연도)
{
var str = 'n ';
for(i = 0; i {
var _year = 연도 i;
var _date = new Date(_year,this.date.getMonth(),this.date.getDate());
str = 'n';
str = '';
}
str = 'n';
str = '';
var _menu = getObjById("cdrMenu");
_menu.innerHTML = str;
};
Calendar.prototype.getMonthMenu = function()
{
var str = '

if(this.date.getFullYear() != _year)
{
str = 'onmouseover="this.className='menuOver'" onmouseout="this.className=''" ';
}
else
{
str = 'class="menuOver"';
}
str = 'onclick="' this.Obj '.bindDate('' _date.toFormatString("-") '')">' _연도 '年

n';
str = 'n';
str = 'n';
str = '

<<	>>

n' ;
for(i = 1; i <= 12; i )
{
var _date = new Date(this.date.getFullYear(),i-1,this.date.getDate()) ;
str = 'n';
}
str = '';
var _menu = getObjById("cdrMenu");
_menu.innerHTML = str;
};
Calendar.prototype.show = function()
{
if (arguments.length > 3 ||args.length == 0)
{
alert("对不起!传入参数不对!" );
return;
}
var _date = null;
var _evObj = null;
var _initValue = null
for(i = 0; i < 인수.길이 ; i )
{
if(typeof(arguments[i]) == "객체" && 인수[i].type == "text")
{_date = 인수[i];}
else if(typeof(arguments[i]) == "객체")
{_evObj = 인수[i];}
else if(typeof(arguments[i]) == "문자열")
{_initValue = 인수[i];}
}
_evObj = _evObj || _date;
inputObj = _date;
targetObj = _evObj
if(!_date){alert("传入参数错误!"); return;}
this.dateInput = _date;
_date = _date.value;
if(_date == "" && _initValue) _date = _initValue;
this .bindDate(_date);
var _target = getPosition(_evObj);
var _obj = getObjById("Calendar");
_obj.style.display = ""; = _target.x 'px';
if((document.body.clientHeight - (_target.y _evObj.clientHeight)) >= _obj.clientHeight)
{
_obj.style.top = ( _target.y _evObj.clientHeight) 'px';
}
else
{
_obj.style.top = (_target.y - _obj.clientHeight) 'px';
}
};
Calendar.prototype.hide = function()
{
var obj = getObjById("Calendar");
obj.style.display = "없음";
};
Calendar.prototype.bindDate = 함수(날짜)
{
var _monthDays = 새 배열(31,30,31,30,31,30,31,31,30,31,30,31) ;
var _arr = date.split('-');
var _date = new Date(_arr[0],_arr[1]-1,_arr[2]);
if(isNaN(_date)) _date = new Date();
this.date = _date;
this.bindHeader();
var _year = _date.getFullYear();
var _month = _date.getMonth();
var _day = 1;
var _startDay = new Date(_year,_month,1).getDay();
var _previYear = _month == 0 ? _년 - 1 : _년;
var _previMonth = _month == 0 ? 11 : _월 - 1;
var _previDay = _monthDays[_previMonth];
if (_previMonth == 1) _previDay =((_previYear%4==0)&&(_previYear0!=0)||(_previYear@0==0))?29:28;
_previDay -= _startDay - 1;
var _nextDay = 1;
_monthDays[1] = ((_year%4==0)&&(_year0!=0)||(_year@0==0))?29:28;
for(i = 0; i {
var _dayElement = getObjById("cdrDay" i);
_dayElement.onmouseover = Function(this.Obj ".onMouseOver(this)");
_dayElement.onmouseout = Function(this.Obj ".onMouseOut(this)");
_dayElement.onclick = Function(this.Obj ".onClick(this)");
this.onMouseOut(_dayElement);
_dayElement.style.color = "";
if(i < _startDay)
{
//获取上一个月적일期
if(this.showMoreDay)
{
var _previDate = new Date(_year,_month) - 1,_previDay);
_dayElement.innerHTML = _previDay;
_dayElement.title = _previDate.toFormatString("yyyy年mm月dd日");
_dayElement.value = _previDate.toFormatString("-");
_dayElement.style.color = this.style.moreDayColor;
_previDay ;
}else
{
_dayElement.innerHTML = "";
_dayElement.title = "";
}
}
else if(_day > _monthDays[_month])
{
//获取下个月的日期
if(this.showMoreDay)
{
var _nextDate = new Date(_year,_month 1,_nextDay);
_dayElement.innerHTML = _nextDay;
_dayElement.title = _nextDate.toFormatString("yyyy年mm月dd日");
_dayElement.value = _nextDate.toFormatString("-");
_dayElement.style.color = this.style.moreDayColor;
_다음날 ;
}else
{
_dayElement.innerHTML = "";
_dayElement.title = "";
}
}
else if(i >= new Date(_year,_month,1).getDay() && _day <= _monthDays[_month])
{
//获取本月日期
_dayElement.innerHTML = _day;
if(_day == _date.getDate())
{
this.onMouseOver(_dayElement);
_dayElement.onmouseover = 함수("");
_dayElement.onmouseout = 함수("");
}
if(this.isHoliday(_year,_month,_day))
{
_dayElement.style.color = this.style.bodyHolidayFontColor;
}
var _curDate = new Date(_년, _월, _일);
_dayElement.title = _curDate.toFormatString("yyyy年mm月dd日");
_dayElement.value = _curDate.toFormatString("-");
_일 ;
}
else
{
_dayElement.innerHTML = "";
_dayElement.title = "";
}
}
var _menu = getObjById("cdrMenu");
_menu.style.display = "없음";
};
Calendar.prototype.bindHeader = function()
{
var _curYear = getObjById("currentYear");
var _curMonth = getObjById("currentMonth");
var _watermark = getObjById("cdrWatermark");
_curYear.innerHTML = this.date.toFormatString("yyyy年");
_curMonth.innerHTML = this.date.toFormatString("mm월");
_watermark.innerHTML = this.date.getFullYear();
};
Calendar.prototype.getToday = function()
{
var _date = new Date();
this.bindDate(_date.toFormatString("-"));
};
Calendar.prototype.isHoliday = 함수(년,월,일)
{
var _date = new Date(년,월,일);
return (_date.getDay() == 6 || _date.getDay() == 0);
};
Calendar.prototype.onMouseOver = function(obj)
{
obj.className = "dayOver";
};
Calendar.prototype.onMouseOut = function(obj)
{
obj.className = "dayOut";
};
Calendar.prototype.onClick = function(obj)
{
if(obj.innerHTML != "") this.dateInput.value = obj.value;
this.hide();
};
Calendar.prototype.onChangeYear = function(isnext)
{
var _year = this.date.getFullYear();
var _month = this.date.getMonth() 1;
var _date = this.date.getDate();
if(_연도 > 999 && _연도 <10000)
{
if(isnext){_year ;}else{ _year --;}
}
else
{
alert("年份超流范围（1000-9999)!");
}
this.bindDate(_연도 '-' _월 '-' _date);
};
Calendar.prototype.onChangeMonth = function(isnext)
{
var _year = this.date.getFullYear();
var _month = this.date.getMonth() 1;
var _date = this.date.getDate();
if(isnext){ _month ;} else {_month--;}
if(_year > 999 && _year <10000)
{
if(_month < 1) {_month = 12; _년--;}
if(_month > 12) {_month = 1; _연도 ;}
}
else
{
alert("年份超出范围（1000-9999)!");
}
this.bindDate(_연도 '-' _월 '-' _date);
};
Calendar.prototype.showMenu = 함수(isyear)
{
var _menu = getObjById("cdrMenu");
if(isyear != null)
{
var _obj = (isyear)? getObjById("현재연도") : getObjById("현재월");
if(isyear)
{
this.getYearMenu(this.date.getFullYear() - 5);
}
else
{
this.getMonthMenu();
}
_menu.style.top = (_obj.offsetTop _obj.offsetHeight) 'px';
_menu.style.left = _obj.offsetLeft 'px';
_menu.style.width = _obj.offsetWidth 'px';
}
if (this.timer != null)clearTimeout(this.timer);
_menu.style.display="";
}
Calendar.prototype.hideMenu = function()
{
var _obj = getObjById("cdrMenu");
this.timer = window.setTimeout(function(){_obj.style.display='none';},500);
}
Number.prototype.NaN0 = function()
{
return isNaN(this) ? 0 : 이것;
}
Date.prototype.toFormatString = function(fs)
{
if(fs.length == 1)
{
return this.getFullYear() fs (this. getMonth() 1) fs this.getDate();
}
fs = fs.replace("yyyy",this.getFullYear());
fs = fs.replace("mm",(this.getMonth() 1));
fs = fs.replace("dd",this.getDate());
fs를 반환합니다.
}
var inputObj = null;
var targetObj = null;
var dragObj = null;
var mouseOffset = null;
function getObjById(obj)
{
if(document.getElementByIdx_x)
{
return document.getElementByIdx_x(obj);
}
else
{
alert("浏览器不支持!");
}
}
function mouseCoords(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev. 페이지Y};
}
return {
x:ev.clientX document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY document.body.scrollTop - document.body.clientTop
};
}
function getPosition(e)
{
var left = 0;
var top = 0;
while (e.offsetParent){
left = e.offsetLeft (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top = e.offsetTop (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
e = e.offsetParent;
}
left = e.offsetLeft (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top = e.offsetTop (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
return {x:왼쪽, y:상단};
}
function getMouseOffset(target, ev)
{
ev = ev || 창.이벤트;
var docPos = getPosition(대상);
var mousePos = mouseCoords(ev);
{x:mousePos.x - docPos.x, y:mousePos.y - docPos.y}를 반환합니다.
}
function closeCalendar(evt){
evt = evt || 창.이벤트;
var _target= evt.target || evt.srcElement;
if(!_target.getAttribute("Author") && _target != inputObj && _target != targetObj)
{
getObjById("Calendar").style.display = "none";
}
}
function dragStart(evt){
evt = evt || 창.이벤트;
var _target= evt.target || evt.srcElement;
if(_target.getAttribute("Author") == "alin_bar")
{
dragObj = getObjById("Calendar");
mouseOffset = getMouseOffset(dragObj, evt);
}
}
함수 드래그(evt)
{
evt = evt || 창.이벤트;
if(dragObj)
{
var mousePos = mouseCoords(evt);
dragObj.style.left = (mousePos.x - mouseOffset.x) 'px';
dragObj.style.top = (mousePos.y - mouseOffset.y) 'px';
}
}
//拖动结束
function dragEnd(evt)
{
dragObj = null;
}
document.onclick = closeCalendar;
document.onmousedown = dragStart;
document.onmousemove = 드래그;
document.onmouseup = dragEnd;

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：꼭 알아야 할 자바스크립트 지식 포인트: "단일 스레드 이벤트 중심"의 사용_javascript 기술다음 기사：꼭 알아야 할 자바스크립트 지식 포인트: "단일 스레드 이벤트 중심"의 사용_javascript 기술

관련 기사

더보기

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개부인 성명Sitemap

© php.cn All rights reserved

if(this.date.getMonth() 1 != i)
{
str = 'onmouseover="this.className='menuOver'" onmouseout="this.className=''" ';
}
else
{
str = 'class="menuOver"';
}
str = 'onclick="' this.Obj '.bindDate('' _date.toFormatString("-") '')">' 나는 '월