테스트 사이트 - 개발 중인 베타 버전입니다

간단한 날짜입력용 자바스크립트 달력입니다.

· 17년 전 · 2793
var Calendar = Class.create();

Calendar.prototype = {

    initialize : function(e, obj) {

        this.event = (e) ? e : window.event;
        this.obj = obj;

        this.today = this.today = new Date();
        this.year = this.today.getFullYear();
        this.month = this.today.getMonth();
        this.date = 1;


        this.dayIndex = new Array('일','월','화','수','목','금','토');
        this.lastDate = new Array(31,  28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

        this.calWin = window.open('', 'calendar', 'width=200,height=180,top='+(this.event.clientY+100)+',left='+this.event.clientX);
        this.makeCal();
    },

    makeCal : function(type, addSub) {
        this.newDate = new Date(this.year, this.month, this.date);
        if(type && addSub) {
            if(type == 'year') {
                if(addSub == 'add') this.newDate.setFullYear(this.newDate.getFullYear()+1); else this.newDate.setFullYear(this.newDate.getFullYear()-1);
            } else if(type == 'month') {
                if(addSub == 'add') this.newDate.setMonth(this.newDate.getMonth()+1); else this.newDate.setMonth(this.newDate.getMonth()-1);
            }
        }

        this.year = this.newDate.getFullYear();
        this.month = this.newDate.getMonth();
        this.day = this.newDate.getDay();

        if(((this.year%4 == 0) && (this.year%100 != 0)) || (this.year%400 ==0)) {
            this.lastDate[1] = 29;
        } else {
            this.lastDate[1] = 28;
        }

        _cal = this;

        this.calsrc = "<table border='0' cellpadding='0' cellspacing='1' borderColor='#eeeeee' width='100%'>\n";
        this.calsrc += "<tr>\n";
        this.calsrc += "<td><span onClick=opener._cal.makeCal('year','sub')><<</span> <span onClick=opener._cal.makeCal('month','sub')><</span></td>\n";
        this.calsrc += "<td>"+this.newDate.getFullYear()+"년 "+(this.month+1)+"월</td>\n";
        this.calsrc += "<td><span onClick=opener._cal.makeCal('month','add')>></span> <span onClick=opener._cal.makeCal('year','add')>>></span></td>\n";
        this.calsrc += "</tr>\n";
        this.calsrc += "</table>\n";
        this.calsrc += "<table border='0' cellpadding='0' cellspacing='1' borderColor='#eeeeee' width='100%'>\n";
        this.calsrc += "<tr>\n";
        for(i=0; i<this.dayIndex.length; i++) {
            this.calsrc += "<td>"+this.dayIndex[i]+"</td>\n";
        }
        this.calsrc += "</tr>\n";
        for(i=0; i<this.day+this.lastDate[this.newDate.getMonth()];i++) {
            if(!(i%7)) {
                this.calsrc += "</tr>\n";
                this.calsrc += "<tr>\n";
            }

            if(i >= this.day) {
                this.calsrc += "<td><span onClick=opener._cal.setDate('"+((i-this.day)+1)+"')>"+((i-this.day)+1)+"</td>\n";
            } else {
                this.calsrc += "<td></td>\n";
            }
        }
        this.calsrc += "</tr>\n";
        this.calsrc += "</table>\n";

        this.calWin.document.open();
        this.calWin.document.clear();
        this.calWin.document.write(this.calsrc);
        this.calWin.document.close();
    },

    fillZero : function(len, value) {
        var value = value.toString();
        var addLen = len - value.length;
        for(i=0; i<addLen; i++) {
            value = "0"+value;
        }
        return value;
    },

    setDate : function(day) {
        $(this.obj).value = this.year+'-'+this.fillZero(2,this.month+1)+'-'+this.fillZero(2,day);
        this.calWin.close();
    }
}



<input type="text" name="date" id="date'><input type="button" onClick="new Calendar(event, 'date')" value="달력" />

이렇게 사용하면 됩니다.
급조하느라 부족한부분이 많습니다.
[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
12487
12486
380
12484
12483
376
12482
12481
12479
12478
12477
12476
12475
12474
12473
12472
12471
12470
12469
371
12468
12467
12466
12465
12464