JS 学習: シンプルなカレンダーコントロール_時刻と日付-jsチュートリアル-php.cn

JS 学習: シンプルなカレンダーコントロール_時刻と日付

WBOY

リリース： 2016-05-16 18:31:26

オリジナル

965 人が閲覧しました

このカレンダーコントロールは、以下に示すように、Yuanzi で使用されるカレンダーに似ています。

js 简易的日历控件

この種のカレンダーコントロールの実装は難しくありません。私のアイデアを簡単に分析します。

まず、コントロールの設定可能な項目です。

コードをコピーしますコードは次のとおりです。次のように:

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

それらの半分はセルスタイルを制御するために使用され (あまり多くの説明はありません)、残り (firstDayOfWeek、prevNextMonthDaysVisible、weekDayNames) は次の意味を持ちます:
firstDayOfWeek : 曜日を初日として始まるカレンダー
prevNextMonthDaysVisible: 今月以外の日付を表示するかどうか
weekDayNames: 週の名前(1から始まる配列、1の値が使用されます)例として)

次に、HTML コードを生成する段階に入ります:
1. カレンダーヘッダーを生成します:

コードをコピーしますコードは次のとおりです:

 
_RenderTitle: function(month, year) { 
var ht = [] 
// Date
ht.push(""); 
ht.push("<
", year, "year", month, "month
>
"); 
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 が一意であることを保証するためのプレフィックスとして使用されます。
週の部分は、firstDayOfWeek の設定に基づいて、weekDayName を取得します。ここで重要なのは、各セルが表す曜日を決定することです。考え方は非常にシンプルです:
var day = (i this.settings.firstDayOfWeek) == 7 : (i this.settings.firstDayOfWeek) % 7;
このようにして、現在のセルが表す週を取得できます。

2. カレンダーの主要部分を生成します:

コードをコピーしますコードは次のとおりです:

 
_RenderBody: function(month, year) { 
var date = new Date(year, month - 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(year, month - 1, dayOfMonth); 
if (Date.parse(new Date().toDateString()) - curDate == 0) { 
ht.push(" class='", this.settings.curDayClass, "'"); 
} 
else { 
ht.push(" class='", this.settings.curMonthNormalCellClass, "'"); 
} 
月の日 ; 
} 
else if (i < daysOfPrevMonth) {//上月 
if (this.settings.prevNextMonthDaysVisible) { 
var prevMonth = month; 
var prev Year = 年; 
if (月 == 1) { 
prevMonth = 12; 
前年 = 前年 - 1; 
} 
else { 
prevMonth = prevMonth - 1; 
} 
curDate = new Date(prev Year, prevMonth - 1, totalDaysOfPrevMonth - (daysOfPrevMonth - i - 1)); 
ht.push(" class='", this.settings.prevMonthCellClass, "'"); 
} 
} 
else {//下月 
if (this.settings.prevNextMonthDaysVisible) { 
var nextMonth = month; 
var next Year = 年; 
if (月 == 12) { 
次の月 = 1; 
次の年 = 前の年 1; 
} 
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).この月一号を代表する星期を取得します。
(2). 日期の表示領域を制御するための 1 つの記録量 dayOfMonth が定義されています。
(3).計算
(4 ).表示今月の日期:
条件i >= daysOfPrevMonth && dayOfMonth <= totalDaysは今月の日期の表示領域を決定します。
(5).表示上月日期:
当i < ; daysOfPrevMonth 時間、つまり上月期の表示領域。
(6)。
(7).いつ終了するか:
循環のために見ることは終了条件ではないため、自分で決定する必要があります時刻出循環环：

复制代码代码如下:

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

i % 7 == 6 一行終了, dayOfMonth - 1 >= totalDays 表示今月日期すでに展示完了。
(8).構造curDate:
curDate は、各単元格に対する対応する日期を表します。
今月日期を表示する場合、curDate = new Date(year, month - 1, dayOfMonth);
在显示上月日期, curDate = new Date(prev Year, prevMonth-1, totalDaysOfPrevMonth - (daysOfPrevMonth - i - 1));
在显表示下月日期, curDate = new Date(next Year, 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; ("");
},

実際、このカレンダーコントロールの目的は、ユーザーが初期化中に日付とその日付に対応するリンクのマッピング配列を渡すことができることです。これは this.dateLinkMappings で、セルを構築するときに、構築中の日付が this.dateLinkMappings に含まれている場合、現在のセルはの形式で構築され、それ以外の場合は通常のテキストの形式になります。

実装ロジックはほぼ同じです。記事の最後にあるデモンストレーション効果を見てみましょう:
フロントエンド呼び出しコードは次のとおりです:

コードをコピーコードは次のとおりです。

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

パッケージのダウンロードアドレス