Prindol

DESIGN, HTML5, CSS3, DOM, Jquery, JSON, Actionscript2/3, Linux, IIS

You are not logged in.

#1 2014-09-19 18:17:19

skydown
Administrator
Registered: 2011-07-25
Posts: 315

[JAVASCRIPT] 달력

이전, 다음, 닫기, 포커스 이동

<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>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</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>&nbsp;</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

Board footer

Powered by FluxBB