You are not logged in.
Pages: 1
이전, 다음, 닫기, 포커스 이동
<div class="calendarWrap" id="calendarBox" style="display:none;">
<div class="calendarArea">
<div class="calInner">
<div class="calHead">
<button class="prev" type="button">이전 달</button>
<span class="month" id="calendarMonth"></span>
<button class="next" type="button">다음 달</button>
</div><!-- .calHead -->
<div class="calBody">
<table class="tb" border="0" cellpadding="0" cellspacing="0" summary="일, 월, 화, 수, 목, 금, 토 항목으로 구성">
<caption class="blind">달력 날짜 선택</caption>
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
<col class="col5" />
<col class="col6" />
<col class="col7" />
</colgroup>
<thead>
<tr>
<th>일</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
<th>토</th>
</tr>
</thead>
<tbody id="calendarBody">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div><!-- .calBody -->
<button class="calClose" type="button">달력 닫기</button>
</div><!-- .calInner -->
</div><!-- .calendarArea -->
</div><!-- .calendarWrap -->/* 달력 2014-09-17 skydown@career.co.kr */
var _calendarBox = _calendarMonth = _calendarBody = _calendarPrev = _calendarNext = _calClose = _calButton = _calendarInput =
_calToday = _calDate = _calMonth = _calDow = _calYear = Weekday = MonthA = Mdays = null
var calendarBoxFnc = {
init: function() {
_calendarBox = $('#calendarBox');
_calendarMonth = $('#calendarMonth');
_calendarBody = $('#calendarBody');
_calendarPrev = _calendarBox.find('.calHead .prev');
_calendarNext = _calendarBox.find('.calHead .next');
_calClose = _calendarBox.find('.calClose');
_calButton = _calendarBox.find('td > button');
calendarBoxFnc.set();
_calClose.click(function() {
_calendarBox.hide();
_calendarInput.focus();
});
_calendarPrev.click(function() {
_calToday.setMonth( _calToday.getMonth() - 1 );
_calToday.setDate(1);
calendarBoxFnc.set();
});
_calendarNext.click(function() {
_calToday.setMonth( _calToday.getMonth() + 1 );
_calToday.setDate(1);
calendarBoxFnc.set();
});
},
input: function(day) {
var month = null;
(MonthA[_calMonth] < 10) ? month = '0' + MonthA[_calMonth] : month = MonthA[_calMonth];
(day < 10) ? day = '0' + day : day;
_calendarInput.val(_calYear + '-' + month + '-' + day).focus();
_calendarBox.hide();
},
show: function(p) {
_calendarInput = $('#' + p);
var _pos = _calendarInput.position();
_calendarBox.show().css({
'left': _pos.left,
'top': _pos.top
}).focus();
},
set: function() {
// this array gives the weekday names
Weekday = new Array();
Weekday[0] = "Sunday";
Weekday[1] = "Monday";
Weekday[2] = "Tuesday";
Weekday[3] = "Wednesday";
Weekday[4] = "Thursday";
Weekday[5] = "Friday";
Weekday[6] = "Saturday";
// this array gives month names
MonthA = new Array();
MonthA[0] = "1" //January";
MonthA[1] = "2" //February";
MonthA[2] = "3" //March";
MonthA[3] = "4" //April";
MonthA[4] = "5" //May";
MonthA[5] = "6" //June";
MonthA[6] = "7" //July";
MonthA[7] = "8" //August";
MonthA[8] = "9" //September";
MonthA[9] = "10" //October";
MonthA[10] = "11" //November";
MonthA[11] = "12" //December";
// this array gives the number of days in each month
Mdays = new Array();
Mdays[0] = 31;
Mdays[1] = 28;
Mdays[2] = 31;
Mdays[3] = 30;
Mdays[4] = 31;
Mdays[5] = 30;
Mdays[6] = 31;
Mdays[7] = 31;
Mdays[8] = 30;
Mdays[9] = 31;
Mdays[10] = 30;
Mdays[11] = 31;
// this code gets current date information
if (_calToday == null) _calToday = new Date();
_calDate = _calToday.getDate();
_calMonth = _calToday.getMonth();
_calDow = _calToday.getDay();
_calYear = _calToday.getYear();
// these are variables for
var day = 1;
var i, j;
// adjust year for browser differences
if (_calYear < 2000) {
_calYear += 1900;
}
// account for leap year
if ((_calYear % 400 == 0) || ((_calYear % 4 == 0) && (_calYear % 100 !=0)))
Mdays[1] = 29;
// determine day of week for first day of the month
var Mfirst = _calToday;
Mfirst.setDate(1);
var dow1 = Mfirst.getDay();
// write out current date
var _month = _calYear + "." + MonthA[_calMonth];
_calendarMonth.html(_month);
// construct calendar for current month
var _tbody = "";
for (i = 0; i < 6; i++) {
// this loop writes one row of days Sun-Sat
_tbody += ("<tr>");
for (j = 0; j < 7; j++) {
// this loop determines which dates to display and in which column
if ((i == 0 && j < dow1) || (day > Mdays[_calMonth])) {
// this puts in blank cells at the beginning an end of the month
_tbody += ("<td> </td>");
} else {
if (day == _calDate) {
// highlight the current day and display the date for this cell
_tbody += ("<td><button class='on' type='button' value='"+ day +"' onclick='calendarBoxFnc.input(this.value);'>" + day + "</button></td>");
} else {
// display the date for this cell
_tbody += ("<td><button type='button' value='"+ day +"' onclick='calendarBoxFnc.input(this.value);'>" + day + "</button></td>");
}
// increment day counter
day++;
}
}
// end of row; determine if more rows needed
_tbody += ("</tr>");
if (day > Mdays[_month]) {
i = 6;
}
}
// end of table
_calendarBody.html(_tbody);
}
};
calendarBoxFnc.init();Offline
Pages: 1