JavaScript實現簡單日曆

頁面代碼：

JavaScript Sample<script type="text/javascript" src="inputDate.js"></script>

Javascript代碼：

    function getCurrentDay()    {    var newDate = new Date;    var odate = document.getElementById("dateText");    var date_year = newDate.getFullYear();var date_month = newDate.getMonth() + 1;var date_today = newDate.getDate();    odate.value = date_year+"-"+date_month+"-"+date_today;    }    function displayCalendar(){drawCalendar();}function closeCalendar(){var oCalendarContainer = document.getElementById("calendarContainer");oCalendarContainer.innerHTML = "";}function drawCalendar(sYear,sMonth){var newDate;if(arguments[0] == null || arguments[1] == null){newDate = new Date();}else{newDate = new Date(sYear,sMonth - 1);}var date_year = newDate.getFullYear();var date_month = newDate.getMonth() + 1;var date_today = newDate.getDate();var date_day = newDate.getDay();var nextMonth = date_month + 1;var nextYear = date_year;var prevMonth = date_month - 1;var prevYear = date_year;if(sMonth == 12){nextMonth = 1;nextYear = date_year + 1;}if(sMonth == 1){prevMonth = 12;prevYear = date_year - 1;}var calendarTable = "";calendarTable += '
 
  ';calendarTable += ' 
  
    ';//向前翻年calendarTable += '
    ';//向前翻月calendarTable += '
    ';//向後翻月calendarTable += '
    '; //向後翻年 calendarTable += '
    ';calendarTable += ' 
   ';//星期表頭calendarTable += ' 
   
    ';calendarTable += ' 
    ';calendarTable += ' 
    ';calendarTable += ' 
    ';calendarTable += ' 
    ';calendarTable += ' 
    ';calendarTable += ' 
    ';calendarTable += ' 
    ';calendarTable += ' 
   ';//計算一個月內的天數,注意閏月 var dayNum_in_month = [31,28,31,30,31,30,31,31,30,31,30,31]; var isleapyear = date_year % 4; if(isleapyear == 0) { dayNum_in_month[1] = 29; } var month_alldays = dayNum_in_month[date_month - 1]; //計算行數，line_top表示當前日期上面的行數，包括當前行；line_bot表示當前日期下面的行數，不包括當前行 var line_top; var line_bot; if((date_today - date_day + 1) % 7 != 0) { line_top = Math.floor((date_today - date_day + 1) / 7) + 1; } else { line_top = Math.floor((date_today - date_day + 1) / 7); } if((30 - date_today + date_day + 1) % 7 != 0) { line_bot = Math.floor((30 - date_today + date_day + 1) / 7) + 1; } else { line_bot = Math.floor((30 - date_today + date_day + 1) / 7); } //定義一個二維數組，預備一個6*7的數組，數組中每個元素對應一個儲存格(日期) var dateList = new Array([""],[""],[""],[""],[""],[""],[""]); var dateCell; for(var i = 1; i < 7; i++) { //i是行數 calendarTable += ' 
   
    '; for(var j = 0; j < 7; j++) { //j是列數 dateList[i][j] = date_today - 7 * (line_top - i + 1) + j - date_day; //如果武器<=0，置空 if((date_today - 7 * (line_top - i + 1) + j - date_day) <= 0) { dateList[i][j] = " "; } //如果日期大於月總天數，則不顯示 if((date_today - 7 * (line_top - i + 1) + j - date_day) > month_alldays) { dateList[i][j] = " "; } if(dateList[i][j] != " ") { //如果儲存格不是空，那麼可以設定其觸發三個事件，共有三個事件 //1、單擊事件，將當前日期寫入文字框 //2、滑鼠指標移到儲存格上，改變背景 //3、滑鼠指標離開儲存格，背景複原 dateCell = '
    '; if(i == line_top && j == line_bot) { dateCell = '
    '; } } else { dateCell = "
    "; } calendarTable += dateCell; } calendarTable += '
   '; } calendarTable += '
   '; calendarTable += '
  

   
<<<
<<
>>
>>>
日
一
二
三
四
五
六
'+dateList[i][j]+'
'+dateList[i][j]+'
 

    
'+'關閉('+date_year+"年"+date_month+"月"+')
   
 
'; //將日期寫入 var oCalendarContainer = document.getElementById("calendarContainer"); oCalendarContainer.innerHTML = calendarTable; } //當滑鼠指標指到當前日期儲存格 function setFocus(obj) { obj.style.backgroundColor = "#FF6600"; } //當滑鼠指標離開當前日期儲存格 function setFocusOut(obj) { obj.style.backgroundColor = ""; } //按一下滑鼠目前的儲存格 function setDateText(sYear,sMonth,sDate) { var oDateText = document.getElementById("dateText"); oDateText.value = sYear + "-" + sMonth + "-" + sDate; }

效果：>>下一月 >>>下一年 <<上一月 <<<上一年