JS 학습: 간단한 달력 제어_시간 및 날짜-JS 튜토리얼-php.cn

JS 학습: 간단한 달력 제어_시간 및 날짜

WBOY

풀어 주다： 2016-05-16 18:31:26

원래의

1005명이 탐색했습니다.

이 달력 컨트롤은 아래와 같이 Yuanzi에서 사용하는 달력과 유사합니다.

js 简易的日历控件

이런 종류의 캘린더 제어는 구현하기 어렵지 않습니다. 내 아이디어를 간략하게 분석하면 다음과 같습니다.

먼저 컨트롤의 구성 가능한 항목입니다.

코드를 복사하세요 코드는 다음과 같습니다. 다음과 같습니다:

 
... 
설정: 
{ 
firstDayOfWeek: 1, 
baseClass: "calendar", 
curDayClass: "curDay", 
prevMonthCellClass: " prevMonth", 
nextMonthCellClass: "nextMonth", 
curMonthNormalCellClass: "", 
prevNextMonthDaysVisible: true 
}, 
... 
weekDayNames: [], 
.. . 

그 중 절반은 셀 스타일을 제어하는 데 사용되며(너무 많은 설명 없이) 나머지(firstDayOfWeek, prevNextMonthDaysVisible, weekDayNames)는 다음과 같은 의미를 갖습니다. : 달력은 요일을 첫 번째 날로 시작
prevNextMonthDaysVisible: 이번 달 이외의 날짜 표시 여부
weekDayNames: 요일 이름(1부터 시작하는 배열, 1의 값 사용) 표시 이름은 월요일이므로 비유하자면)

다음으로 HTML 코드 생성 단계로 들어갑니다.
1. 캘린더 헤더 생성:

코드 복사 코드는 다음과 같습니다.

_RenderTitle: function(month, year) { 
var ht = [] 
// 날짜
ht.push(" "); 
ht.push("<
", 연도, "연도", 월, "월
>
"); 
ht.push("//주 
ht.push(""); 
for (var i = 0; i < 7; i ) { 
var day = ( i this.settings.firstDayOfWeek) == 7 ? 7: (i this.settings.firstDayOfWeek) % 7 
ht.push("", this.weekDayNames[day], " ;") 
} 
 ht.push(""); 
return ht.join(""); 
}, 

날짜 부분은 달력을 사용하는 작업 '버튼'의 ID입니다. 컨트롤 컨테이너의 ID는 ID가 고유한지 확인하기 위해 접두어로 사용됩니다.
week 부분은 firstDayOfWeek 설정에 따라 weekDayName을 가져옵니다. 여기서 핵심은 각 셀이 나타내는 요일을 결정하는 것입니다.
var day = (i this.settings.firstDayOfWeek) == 7 ? (i this.settings.firstDayOfWeek) % 7
이런 식으로 현재 셀이 나타내는 주를 얻을 수 있습니다.

2. 달력의 주요 부분 생성:

코드 복사 코드는 다음과 같습니다.

 
_RenderBody: function(월, 연도) { 
var date = new Date(년, 월 - 1, 1); 
var day = date.getDay(); 
var dayOfMonth = 1; 
var daysOfPrevMonth = (7 - this.settings.firstDayOfWeek 일) % 7; 
var totalDays = this._GetTotalDays(월, 연도); 
var totalDaysOfPrevMonth = this._GetToalDaysOfPrevMonth(월, 연도); 
var ht = []; 
var curDate; 
for (var i = 0; ; i ) { 
curDate = null; 
if (i % 7 == 0) {//새로운 일행 
ht.push(""); 
} 
ht.push("if (i >= daysOfPrevMonth && dayOfMonth <= totalDays) {//本月 
curDate = new Date(년, 월 - 1, dayOfMonth); 
if (Date.parse(new Date().toDateString()) - curDate == 0) { 
ht.push(" class='", this.settings.curDayClass, "'"); 
} 
else { 
ht.push(" class='", this.settings.curMonthNormalCellClass, "'"); 
} 
dayOfMonth ; 
} 
else if (i < daysOfPrevMonth) {//上月 
if (this.settings.prevNextMonthDaysVisible) { 
var prevMonth = Month; 
var prevYear = 연도; 
if (월 == 1) { 
prevMonth = 12; 
prevYear = prevYear - 1; 
} 
else { 
prevMonth = prevMonth - 1; 
} 
curDate = new Date(prevYear, prevMonth - 1, totalDaysOfPrevMonth - (daysOfPrevMonth - i - 1)); 
ht.push(" class='", this.settings.prevMonthCellClass, "'"); 
} 
} 
else {//다운월 
if (this.settings.prevNextMonthDaysVisible) { 
var nextMonth = 월; 
var nextYear = 연도; 
if (월 == 12) { 
nextMonth = 1; 
nextYear = prev1년차; 
} 
else { 
nextMonth = nextMonth 1; 
} 
curDate = new Date(nextYear, nextMonth-1, i - dayOfMonth - daysOfPrevMonth 2); 
ht.push(" class='", this.settings.nextMonthCellClass, "'"); 
} 
} 
ht.push(">"); 
ht.push(this._BuildCell(curDate)); 
ht.push(""); 
if (i % 7 == 6) {//结束一行 
ht.push(""); 
} 
if (i % 7 == 6 && dayOfMonth - 1 >= totalDays) { 
break; 
} 
} 
return ht.join(""); 
}, 

    (1).获取该月一号代表星期几。这样才能判断1号应该放到哪个单元格，也就是该月从哪个单원格开始(创建日期时候month减了1，这是由于js Date 对象本身的特性).
    (2).定义了一个标识变weight dayOfMonth , 用于控由月日期显示区域。
    (3).计算要要要为下月要多는 100%가 넘지 않습니다.
    (4 ).显示本月日期:
    条件i >= daysOfPrevMonth && dayOfMonth <= totalDays决定了本月日期的显示区域。
    (5).显示上月日期:
    当i < ; daysOfPrevMonth 时即为上月日期的显示区域。
    (6). (4)、(5) 从代码看到for循环是没有终止条的，因此必须自己决何时退 Out循环：

复代码代码如下:

if (i % 7 == 6 && dayOfMonth - 1 >= totalDays) {

break; 
} 

 
     i % 7 == 6表示一行结束, dayOfMonth - 1 >= totalDays表示本月日期已经展示完毕。 

(8).构造curDate:
curDate代表每个单元格对应的日期。
현재显示本月日期时, curDate = new Date(년, 월 - 1, dayOfMonth);
현재 显示上月日期时, curDate = new Date(prevYear, prevMonth-1, totalDaysOfPrevMonth - (daysOfPrevMonth - i - 1));
현재显示下月日期时, curDate = new Date(nextYear, nextMonth-1, i - dayOfMonth - daysOfPrevMonth 2),加2是由于i是从0开始，本身就少了1，dayOfMonth 在退出显示本月日期时多加了一次.
最后，再来看看_BuildCell做了什么事情:

复代码代码如下:

_BuildCell: function(curDate) {
var ht = [];
if (curDate) {
for (var j = 0; j < this.dateLinkMappings.length; j ) {
if (Date.parse(this.dateLinkMappings[j].Date) - curDate == 0) {
ht.push("", curDate.getDate(), "")
break;
}
}
if (j == this.dateLinkMappings.length) {
ht.push(curDate.getDate());
}
}
else {
ht.push(" ")
}
return ht.join ("");
},

실제로 이 달력 컨트롤의 의도는 사용자가 초기화 중에 날짜와 해당 날짜에 해당하는 링크의 매핑 배열을 전달할 수 있다는 것입니다. dateLinkMappings, 셀 구성 시 구성되는 날짜가 this.dateLinkMappings에 포함되어 있으면 현재 셀은 형식으로 구성되고, 그렇지 않으면 일반 텍스트 형식으로 구성됩니다.

구현 로직은 대략 동일합니다. 기사 마지막 부분에서 데모 효과를 살펴보겠습니다.
프런트 엔드 호출 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

 
var date = new Date() 
var mapping = [ ]; 
mapping.push(new DateLinkMapping("3-22-2010" , "javascript:alert(1)")) 
mapping.push(new DateLinkMapping("4-1-2010", " javascript:alert(1)")) 
Calendar.Init(null, 매핑 ); 
Calendar.RenderCalendar("myCalendar", date.getMonth() 1, date.getFullYear()); 

패키지 다운로드 주소