A

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

· 2008-09-18 (목) 17:58:50 · 4120
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에서 이동 됨]
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
12-08-29 조회 4,125
12-08-07 조회 3,793
12-08-03 조회 3,615
12-07-31 조회 3,711
12-07-30 조회 3,665
12-07-16 조회 3,878
12-07-15 조회 3,695
12-07-07 조회 3,550
12-07-06 조회 3,763
12-07-03 조회 3,721
12-06-29 조회 3,326
12-06-22 조회 3,704
12-06-17 조회 3,960
12-05-21 조회 3,875
12-05-02 조회 3,418
12-05-02 조회 4,219
12-05-02 조회 3,335
12-04-30 조회 3,527
12-04-30 조회 3,215
12-03-17 조회 4,067
12-03-10 조회 3,407
12-03-08 조회 3,934
12-03-03 조회 3,644
12-02-27 조회 5,051
12-02-17 조회 4,356
12-02-16 조회 4,611
12-02-03 조회 3,312
12-01-31 조회 3,220
12-01-24 조회 3,207
12-01-17 조회 3,914
12-01-05 조회 3,453
11-12-30 조회 3,188
11-12-23 조회 4,754
11-12-08 조회 3,485
11-12-07 조회 4,469
11-11-27 조회 3,886
11-11-25 조회 4,214
11-11-23 조회 3,665
11-11-22 조회 3,529
11-11-09 조회 3,236
11-10-23 조회 3,165
11-10-19 조회 3,129
11-10-08 조회 2,818
11-10-04 조회 2,824
11-10-04 조회 5,268
11-09-01 조회 4,349
11-08-13 조회 2,529
11-08-06 조회 3,204
11-07-11 조회 3,600
11-06-27 조회 2,977
11-06-21 조회 2,636
11-06-13 조회 2,436
11-06-07 조회 2,448
11-05-26 조회 2,417
11-04-20 조회 2,742
11-03-21 조회 2,832
11-03-18 조회 2,531
11-03-11 조회 2,550
11-02-07 조회 2,381
11-01-18 조회 2,703
11-01-12 조회 2,415
11-01-06 조회 2,520
10-12-10 조회 2,778
10-12-09 조회 2,624
10-12-08 조회 5,058
10-11-29 조회 2,890
10-11-28 조회 2,800
10-11-28 조회 2,642
10-11-19 조회 2,827
10-11-04 조회 2,707
10-10-21 조회 2,432
10-10-19 조회 3,382
10-10-12 조회 2,706
10-10-07 조회 2,539
10-09-30 조회 3,496
10-09-17 조회 3,909
10-09-17 조회 3,857
10-05-31 조회 3,560
09-12-31 조회 3,682
09-07-23 조회 5,013
08-09-16 조회 3,220
08-09-06 조회 2,969
08-09-04 조회 3,385
08-08-16 조회 4,426
08-08-15 조회 3,292
08-08-14 조회 4,505
08-08-12 조회 3,979
08-07-23 조회 2,796
08-07-10 조회 3,746
08-07-04 조회 2,965
08-06-27 조회 7,605
08-06-19 조회 4,910
08-05-27 조회 5,525
08-05-25 조회 5,357
08-05-23 조회 3,429
08-05-23 조회 4,589
08-05-21 조회 4,948
08-05-20 조회 4,069
08-05-20 조회 3,293
08-04-18 조회 4,348