그누보드 관련 질문은 아니지만.. 시간입력 질문입니다 채택완료

</p><p>//js/calendar.js</p><p> </p><p>// js calendar by jaewon</p><p>// last_modified : 2009/08/06</p><p>// Usage : <script type="text/javascript" src="calendar.js"></script></p><p>//         <input type="text" id="start_date" name="start_date" value="20081027|null"></p><p>//         <input type="button" name="달력" onClick="calendar(event, 'start_date')"></p><p>var calendar_div;</p><p>var calendar_obj;</p><p>var calendar_tt;</p><p> </p><p>// ex) calendar(event, 'object_name', 'YYYYMMDD')</p><p>// fmt option이 없으면 기본으로 설정.</p><p>// YYYY : 년</p><p>// MM : 월</p><p>// DD : 일</p><p>var calendar_fmt = "YYYY-MM-DD";</p><p> </p><p>// 숨겨야 되는 select element 저장변수(Array)</p><p>var hidden_select;</p><p>// element의 x, y, width, height를 가져옴. (select외에 object를 인수로 사용해도 됨 ex:div)</p><p>function get_pos(selectObj)</p><p>{</p><p>    var pos = new Array();</p><p>    </p><p>    var pos_x = 0, pos_y = 0;</p><p>    </p><p>    // while에서 offsetParent를 찾아가는 방식이라</p><p>    // 다른 지정자에 인수로 넘어온 object를 넘겨줌.</p><p>    obj = selectObj;</p><p>    </p><p>    // 좌표계산</p><p>    while(obj.offsetParent)</p><p>    {</p><p>        pos_y += parseInt(obj.offsetTop);</p><p>        pos_x += parseInt(obj.offsetLeft);</p><p>        </p><p>        obj = obj.offsetParent;</p><p>    }</p><p>    pos_x += parseInt(obj.offsetLeft);</p><p>    pos_y += parseInt(obj.offsetTop);</p><p>    </p><p>    // 좌표저장</p><p>    pos.x = pos_x;</p><p>    pos.y = pos_y;</p><p>    pos.x2 = pos_x + selectObj.offsetWidth;</p><p>    pos.y2 = pos_y + selectObj.offsetHeight;</p><p>    </p><p>    return pos;</p><p>}</p><p> </p><p>// IE와 Maxton에서 select elements를 숨김</p><p>// 달력 레이어의 좌표를 인수로 넘겨서 해당 좌표내에 select element가 있는지 체크하는 방식</p><p>function hide_select(x, y, x2, y2)</p><p>{</p><p>    var selects = document.getElementsByTagName('select');</p><p>    var hidden_count = 0;</p><p>    </p><p>    x = parseInt(x);</p><p>    y = parseInt(y);</p><p>    x2 = parseInt(x2);</p><p>    y2 = parseInt(y2);</p><p>    </p><p>    // X축이 겹치는지 체크하기 위한 변수</p><p>    var x_cross = false;</p><p>    // Y축이 겹치는지 체크하기 위한 변수</p><p>    var y_cross = false;</p><p>    </p><p>    // 숨겨야 할 select elements를 배열로 등록함.</p><p>    hidden_select = new Array();</p><p>    </p><p>    for(var i=0; i<selects.length; i++)</p><p>    {</p><p>        // select element의 좌표를 가져옴.</p><p>        selects[i].pos = new Array();</p><p>        selects[i].pos = get_pos(selects[i]);</p><p>        </p><p>        // X축이 달력 영역에 포함 되어 있는지 체크</p><p>        if((x <= selects[i].pos.x && x2 >= selects[i].pos.x) || (x <= selects[i].pos.x2 && x2 >= selects[i].pos.x2))</p><p>            x_cross = true;</p><p>        else</p><p>            x_cross = false;</p><p>        </p><p>        // Y축이 달력 영역에 포함되어 있는지 체크</p><p>        if((y <= selects[i].pos.y && y2 >= selects[i].pos.y) || (y <= selects[i].pos.y2 && y2 >= selects[i].pos.y2))</p><p>            y_cross = true;</p><p>        else</p><p>            y_cross = false;</p><p>        </p><p>        // X축이나 Y축이 달력 레이어와 겹쳐지면 해당 select element를 숨김</p><p>        if(x_cross == true && y_cross == true)</p><p>        {</p><p>            selects[i].style.visibility = "hidden";</p><p>            hidden_select[hidden_count++] = i;</p><p>        }</p><p>    }</p><p>}</p><p> </p><p>// IE와 Maxton에서 숨겨진 select elements를 다시 표시해줌.</p><p>function show_select()</p><p>{</p><p>    var selects = document.getElementsByTagName('select');</p><p>    </p><p>    // hide_select function에서 숨긴 select elements를 다시 보여줌.</p><p>    for(var i=0; i<hidden_select.length; i++)</p><p>    {</p><p>        selects[hidden_select[i]].style.visibility = "visible";</p><p>    }</p><p>    hidden_select = null;</p><p>}</p><p> </p><p>// 달력 레이어 초기화</p><p>// 달력 레이어를 만들고 클릭한 object의 위치를 계산해서 달력을 표시할 위치를 계산함</p><p>function calendar_set(e)</p><p>{</p><p>    if(!e) var e = window.event;</p><p>    var click_obj = e.target || e.srcElement;</p><p>    </p><p>    // 화면의 최대크기를 구함.</p><p>    try</p><p>    {</p><p>        var s_width = parseInt(window.scrollMaxX) + parseInt(docElement.clientWidth);</p><p>    }</p><p>    catch(e)</p><p>    {</p><p>        var s_width = (document.body.scrollWidth > document.body.clientWidth)?  document.body.scrollWidth : document.body.clientWidth;</p><p>    }</p><p>    </p><p>    // 클릭한 object의 좌표를 가져옴</p><p>    var pos_x = 0;</p><p>    var pos_y = 0;</p><p>    var obj = click_obj;</p><p>    </p><p>    while(obj.offsetParent)</p><p>    {</p><p>        pos_y += parseInt(obj.offsetTop);</p><p>        pos_x += parseInt(obj.offsetLeft);</p><p>        </p><p>        obj = obj.offsetParent;</p><p>    }</p><p>    pos_x += parseInt(obj.offsetLeft);</p><p>    pos_y += parseInt(obj.offsetTop);</p><p>    </p><p>    pos_y += click_obj.offsetHeight;</p><p>    </p><p>    if(s_width < pos_x + 160)</p><p>    {</p><p>        pos_x -= 160;</p><p>        pos_x += parseInt(click_obj.offsetWidth);</p><p>    }</p><p>    </p><p>    // 기존에 만든 달력 레이어가 있으면 재사용(좌표는 다시 계산함)하고 없으면 생성</p><p>    calendar_div = document.getElementById('calendar_div');</p><p>    </p><p>    if(!calendar_div)</p><p>    {</p><p>        calendar_div = document.createElement("DIV");</p><p>        document.body.appendChild(calendar_div);</p><p>    }</p><p>    calendar_div.id = "calendar_div";</p><p>    calendar_div.style.cssText = "width:160px; background-color:#ffffff; border:3px; border-style:double; border-color:#c2c2c2;";</p><p>    calendar_div.style.position = "absolute";</p><p>    calendar_div.style.top = pos_y + 'px';</p><p>    calendar_div.style.left = pos_x + 'px';</p><p>    </p><p>    calendar_div.style.visibility = "visible";</p><p>    </p><p>    // mouseover 상태에서는 창닫기 타이머를 제거함.</p><p>    calendar_div.onmouseover = function(e) {</p><p>        if(calendar_tt)</p><p>            window.clearTimeout(calendar_tt);</p><p>    }</p><p>    </p><p>    // mouseout이 되면 창닫기 타이머를 설정함</p><p>    // 설정된 시간 후에 창이 닫힘</p><p>    calendar_div.onmouseout = function() {</p><p>        if(calendar_tt)</p><p>            window.clearTimeout(calendar_tt);</p><p>        calendar_tt = window.setTimeout("calendar_hide()", 300);</p><p>    }</p><p>    </p><p>    calendar_div.focus();</p><p>    </p><p>    // 더블클릭해도 창이 닫히도록..</p><p>    //calendar_div.ondblclick = calendar_close;</p><p>}</p><p> </p><p>// 달력 레이어를 닫음</p><p>function calendar_close()</p><p>{</p><p>    document.getElementById('calendar_div').style.visibility = "hidden";</p><p>    document.getElementById('calendar_months').style.visibility = "hidden";</p><p>    document.getElementById('calendar_years').style.visibility = "hidden";</p><p>    </p><p>    if(hidden_select)</p><p>        show_select();</p><p>    </p><p>    return false;</p><p>}</p><p> </p><p>function calendar_years_change(calendar_y, calendar_m)</p><p>{</p><p>    var calendar_years = document.getElementById('calendar_years');</p><p>    var html = calendar_years_html(calendar_y, calendar_m);</p><p>    calendar_years.innerHTML = html;</p><p>}</p><p> </p><p>// 년도 레이어</p><p>function calendar_years_html(calendar_y, calendar_m)</p><p>{</p><p>    var html = "";</p><p>    var margin_top = 0;</p><p>    var margin_left = 0;</p><p>    var prev_year, next_year;</p><p>    </p><p>    var year = Number(parseInt((Number(calendar_y) - 1)  / 10) * 10 + 1);</p><p>    // 년도선택 레이어 설정</p><p>    for(var i=0; i<10; i++)</p><p>    {</p><p>        margin_top = (i >= 4)? 2 : 0;</p><p>        margin_left = (i % 4 == 0)? 0 : 2;</p><p>        html += "<div style=\"margin-top:"+margin_top+"px; margin-left:"+margin_left+"px; float:left; width:35px; height:20px; text-align:center; padding-top:2px; border:1px solid #c2c2c2; background-color:#e5e5e5; font-size:11px; cursor:pointer;\" onClick=\"calendar_draw('"+String(year+i)+String(calendar_m)+"01')\" onMouseOver=\"this.style.backgroundColor='#c2c2c2';\" onMouseOut=\"this.style.backgroundColor='#e5e5e5';\">"+String(year+i)+"</div>";</p><p>    }</p><p>    </p><p>    prev_year = (year - i);</p><p>    next_year = (year + i);</p><p>    html += "<div style=\"margin-top:"+margin_top+"px; margin-left:"+margin_left+"px; float:left; width:35px; height:20px; text-align:center; padding-top:2px; border:1px solid #c2c2c2; background-color:#e5e5e5; font-size:11px; cursor:pointer;\" onClick=\"calendar_years_change('"+String(prev_year)+"', '"+String(calendar_m)+"')\" onMouseOver=\"this.style.backgroundColor='#c2c2c2';\" onMouseOut=\"this.style.backgroundColor='#e5e5e5';\">이전</div>";</p><p>    html += "<div style=\"margin-top:"+margin_top+"px; margin-left:"+margin_left+"px; float:left; width:35px; height:20px; text-align:center; padding-top:2px; border:1px solid #c2c2c2; background-color:#e5e5e5; font-size:11px; cursor:pointer;\" onClick=\"calendar_years_change('"+String(next_year)+"', '"+String(calendar_m)+"')\" onMouseOver=\"this.style.backgroundColor='#c2c2c2';\" onMouseOut=\"this.style.backgroundColor='#e5e5e5';\">다음</div>";</p><p>    </p><p>    return html;</p><p>}</p><p> </p><p>// 달력 레이어에 달력을 출력함.</p><p>function calendar_draw(set_date)</p><p>{</p><p>    var days_arr = new Array(31,28,31,30,31,30,31,31,30,31,30,31);</p><p>    </p><p>    var html = "<table border=\"0\" width=\"100%\">";</p><p>    var calendar_date, calendar_t;</p><p>    </p><p>    // 달력을 입력할 input box의 숫자만 검출한 값의 자릿수가 6자리 YYYYMM 이거나 8자리 YYYYMMDD라면 해당 년월에 맞게 달력을 표시함</p><p>    if(set_date && (set_date.length == 6 || set_date.length == 8))</p><p>    {</p><p>        calendar_date = set_date;</p><p>        var y = calendar_date.substring(0, 4);</p><p>        var m = calendar_date.substring(4, 6);</p><p>        var s_t = new Date(y, m-1, 1);</p><p>        if(s_t.getMonth()+1 != Number(m))</p><p>            calendar_t = null;</p><p>        else</p><p>            calendar_t = new Date(y, m-1, 1);</p><p>    }</p><p>    </p><p>    // 오늘 날짜를 구함. (오늘날짜는 font-weight:bold; 스타일 지정)</p><p>    var t = new Date();</p><p>    var today = t.getFullYear();</p><p>    </p><p>    if(t.getMonth()+1 < 10)</p><p>        today += '0' + String(t.getMonth()+1);</p><p>    else</p><p>        today += String(t.getMonth()+1);</p><p>    </p><p>    if(t.getDate() < 10)</p><p>        today += '0' + String(t.getDate());</p><p>    else</p><p>        today += String(t.getDate());</p><p>    </p><p>    // 달력을 입력할 input box의 값으로 기본값이 설정되지 않았다면 오늘을 기준으로 달력을 표시함</p><p>    if(!calendar_t)</p><p>    {</p><p>        var y = t.getFullYear();</p><p>        var m = t.getMonth();</p><p>        </p><p>        calendar_t = new Date(y, m, 1);</p><p>    }</p><p>    </p><p>    // 표시할 달력의 년월</p><p>    var calendar_yymm = calendar_t.getFullYear();</p><p>    calendar_yymm += (calendar_t.getMonth()+1 < 10)? String('0' + (calendar_t.getMonth() + 1)) : String(calendar_t.getMonth()+1);</p><p>    </p><p>    // 표시할 달력의 연도</p><p>    var calendar_y = Number(calendar_yymm.substring(0, 4));</p><p>    // 표시할 달력의 월</p><p>    var calendar_m = Number(calendar_yymm.substring(4, 6));</p><p>    </p><p>    // 이전달 링크 값 (◀클릭)</p><p>    var prev_m;</p><p>    if(Number(calendar_m) == 1)</p><p>    {</p><p>        prev_m = String(calendar_y - 1);</p><p>        prev_m += '12';</p><p>    }</p><p>    else</p><p>    {</p><p>        prev_m = String(calendar_y);</p><p>        prev_m += (calendar_m - 1 < 10)? '0' + (calendar_m - 1) : calendar_m - 1;</p><p>    }</p><p>    </p><p>    // 다음달 링크값 (▶클릭)</p><p>    var next_m;</p><p>    if(Number(calendar_m) == 12)</p><p>    {</p><p>        next_m = String(calendar_y + 1);</p><p>        next_m += '01';</p><p>    }</p><p>    else</p><p>    {</p><p>        next_m = String(calendar_y);</p><p>        next_m += (calendar_m + 1 < 10)? '0' + (calendar_m + 1) : calendar_m + 1;</p><p>    }</p><p>    </p><p>    // 이전 다음달 값을 계산하기 위해 달력표시 월의 값을 아래에서 스트링으로 변경</p><p>    calendar_m = (calendar_m < 10)? String('0' + calendar_m) : String(calendar_m);</p><p>    // 전년도</p><p>    var prev_y = String(calendar_y-1) + calendar_m;</p><p>    // 후년도</p><p>    var next_y = String(calendar_y+1) + calendar_m;</p><p>    </p><p>    // 년, 월, 닫기 버튼 html</p><p>    html += "<tr height=\"20\">";</p><p>    html += "<td colspan=\"6\" width=\"100%\" align=\"center\" valign=\"center;\">";</p><p>    html += "<span style=\"cursor:pointer; font-size: 12px;\" onClick=\"calendar_draw('"+prev_y+"')\">◀</span> ";</p><p>    html += "<span style=\"font-size: 12px; cursor:pointer;\" onClick=\"calendar_years_toggle()\">"+calendar_y+"</span> ";</p><p>    html += "<span style=\"cursor:pointer; font-size: 12px;\" onClick=\"calendar_draw('"+next_y+"')\">▶</span> ";</p><p>    html += "<span style=\"cursor:pointer; font-size: 12px;\" onClick=\"calendar_draw('"+prev_m+"')\">◀</span> ";</p><p>    html += "<span style=\"cursor:pointer; font-size: 12px;\" onClick=\"calendar_months_toggle()\">"+calendar_m+"</span> ";</p><p>    html += "<span style=\"cursor:pointer; font-size: 12px;\" onClick=\"calendar_draw('"+next_m+"')\">▶</span> ";</p><p>    html += "</td>";</p><p>    html += "<td align=\"right\" valign=\"center;\"><span style=\"cursor:pointer; font-size: 12px; font-weight:bold;\" onClick=\"calendar_close()\">X</span></td>";</p><p>    html += "</tr>";</p><p>    // 요일표시 html</p><p>    html += "<tr height=\"20\">";</p><p>    html += "<td style=\"background-color:#f0f0f0; text-align:center; font-weight:bold; font-size:11px;\">일</td>";</p><p>    html += "<td style=\"background-color:#f0f0f0; text-align:center; font-weight:bold; font-size:11px;\">월</td>";</p><p>    html += "<td style=\"background-color:#f0f0f0; text-align:center; font-weight:bold; font-size:11px;\">화</td>";</p><p>    html += "<td style=\"background-color:#f0f0f0; text-align:center; font-weight:bold; font-size:11px;\">수</td>";</p><p>    html += "<td style=\"background-color:#f0f0f0; text-align:center; font-weight:bold; font-size:11px;\">목</td>";</p><p>    html += "<td style=\"background-color:#f0f0f0; text-align:center; font-weight:bold; font-size:11px;\">금</td>";</p><p>    html += "<td style=\"background-color:#f0f0f0; text-align:center; font-weight:bold; font-size:11px;\">토</td>";</p><p>    html += "</tr>";</p><p>    </p><p>    // 달력 시작일의 요일을 구함</p><p>    var week = calendar_t.getDay();</p><p>    // 시작일이 일요일이 아니면 빈 TD 출력</p><p>    for(var i=0; i<week; i++)</p><p>    {</p><p>        html += "<td> </td>\n";</p><p>    }</p><p>    </p><p>    // 해당월의 마지막 날을 가져옴.</p><p>    if(String(calendar_t.getMonth()+1) == '2')</p><p>        max_days = ((( calendar_y % 4 == 0) && (calendar_y % 100 != 0)) || (calendar_y % 400 == 0))? 29 : 28;</p><p>    else</p><p>        max_days = days_arr[calendar_t.getMonth()];</p><p>    </p><p>    // 달력 출력</p><p>    var this_date = "";</p><p>    var style = "";</p><p>    for(var i=1; i<=max_days; i++)</p><p>    {</p><p>        if(week > 6)</p><p>        {</p><p>            html += "</tr>";</p><p>            week = 0;</p><p>        }</p><p>        if(week == 0)</p><p>        {</p><p>            html += "<tr height=\"20\">";</p><p>        }</p><p>        </p><p>        // 달력의 년월</p><p>        this_date = calendar_yymm;</p><p>        // 표시일</p><p>        this_date += (i <= 9)? String('0' + i) : String(i);</p><p>        </p><p>        style = "cursor:pointer; font-size:12px; text-align:center;";</p><p>        // input box의 값과 동일한 날은 underline 표시</p><p>        if(set_date == this_date)</p><p>            style += " text-decoration:underline;";</p><p>        // 오늘날짜는 진하게 표시</p><p>        if(today == this_date)</p><p>            style += " font-weight:bold;";</p><p>        // 일요일은 빨간색</p><p>        if(week == 0)</p><p>            style += " color:red;";</p><p>        // 토요일은 파란색</p><p>        if(week == 6)</p><p>            style += " color:blue;";</p><p>        html += "<td style=\""+style+"\" onClick=\"calendar_set_date('"+this_date+"');\" onMouseOver=\"this.style.backgroundColor = '#c2c2c2';\" onMouseOut=\"this.style.backgroundColor = '#ffffff';\">"+i+"</td>";</p><p>        week ++;</p><p>    }</p><p>    </p><p>    // 토요일로 끝나지 않았으면 빈 TD 출력</p><p>    if(week < 6)</p><p>    {</p><p>        for(var i=week; i<=6; i++)</p><p>        {</p><p>            html += "<td> </td>\n";</p><p>        }</p><p>    }</p><p>    html += "</tr>";</p><p>    html += "</table>";</p><p>    </p><p>    html += "<div id=\"calendar_years\" style=\"position:absolute; margin-left:3px; width:154px; visibility:hidden; background-color:#ffffff;\">";</p><p>    html += calendar_years_html(calendar_y, calendar_m);</p><p>    html += "</div>";</p><p>    </p><p>    // 월선택 레이어 설정</p><p>    html += "<div id=\"calendar_months\" style=\"position:absolute; margin-left:3px; width:154px; visibility:hidden; background-color:#ffffff;\">";</p><p>    html += "<div style=\"float:left; width:22px; height:20px; text-align:center; padding-top:2px; border:1px solid #c2c2c2; background-color:#e5e5e5; font-size:11px; cursor:pointer;\" onClick=\"calendar_draw('"+calendar_y+"01')\" onMouseOver=\"this.style.backgroundColor='#c2c2c2';\" onMouseOut=\"this.style.backgroundColor='#e5e5e5';\">1</div>";</p><p>    html += "<div style=\"float:left; margin-left:2px; width:22px; height:20px; text-align:center; padding-top:2px; border:1px solid #c2c2c2; background-color:#e5e5e5; font-size:11px; cursor:pointer;\" onClick=\"calendar_draw('"+calendar_y+"02')\" onMouseOver=\"this.style.backgroundColor='#c2c2c2';\" onMouseOut=\"this.style.backgroundColor='#e5e5e5';\">2</div>";</p><p>    html += "<div style=\"float:left; margin-left:2px; width:22px; height:20px; text-align:center; padding-top:2px; border:1px solid #c2c2c2; background-color:#e5e5e5; font-size:11px; cursor:pointer;\" onClick=\"calendar_draw('"+calendar_y+"03')\" onMouseOver=\"this.style.backgroundColor='#c2c2c2';\" onMouseOut=\"this.style.backgroundColor='#e5e5e5';\">3</div>";</p><p>    html += "<div style=\"float:left; margin-left:2px; width:22px; height:20px; text-align:center; padding-top:2px; border:1px solid #c2c2c2; background-color:#e5e5e5; font-size:11px; cursor:pointer;\" onClick=\"calendar_draw('"+calendar_y+"04')\" onMouseOver=\"this.style.backgroundColor='#c2c2c2';\" onMouseOut=\"this.style.backgroundColor='#e5e5e5';\">4</div>";</p><p>    html += "<div style=\"float:left; margin-left:2px; width:22px; height:20px; text-align:center; padding-top:2px; border:1px solid #c2c2c2; background-color:#e5e5e5; font-size:11px; cursor:pointer;\" onClick=\"calendar_draw('"+calendar_y+"05')\" onMouseOver=\"this.style.backgroundColor='#c2c2c2';\" onMouseOut=\"this.style.backgroundColor='#e5e5e5';\">5</div>";</p><p>    html += "<div style=\"float:left; margin-left:2px; width:22px; height:20px; text-align:center; padding-top:2px; border:1px solid #c2c2c2; background-color:#e5e5e5; font-size:11px; cursor:pointer;\" onClick=\"calendar_draw('"+calendar_y+"06')\" onMouseOver=\"this.style.backgroundColor='#c2c2c2';\" onMouseOut=\"this.style.backgroundColor='#e5e5e5';\">6</div>";</p><p>    html += "<div style=\"float:left; margin-top:1px; width:22px; height:20px; text-align:center; padding-top:2px; border:1px solid #c2c2c2; background-color:#e5e5e5; font-size:11px; cursor:pointer;\" onClick=\"calendar_draw('"+calendar_y+"07')\" onMouseOver=\"this.style.backgroundColor='#c2c2c2';\" onMouseOut=\"this.style.backgroundColor='#e5e5e5';\">7</div>";</p><p>    html += "<div style=\"float:left; margin-left:2px; margin-top:1px; width:22px; height:20px; text-align:center; padding-top:2px; border:1px solid #c2c2c2; background-color:#e5e5e5; font-size:11px; cursor:pointer;\" onClick=\"calendar_draw('"+calendar_y+"08')\" onMouseOver=\"this.style.backgroundColor='#c2c2c2';\" onMouseOut=\"this.style.backgroundColor='#e5e5e5';\">8</div>";</p><p>    html += "<div style=\"float:left; margin-left:2px; margin-top:1px; width:22px; height:20px; text-align:center; padding-top:2px; border:1px solid #c2c2c2; background-color:#e5e5e5; font-size:11px; cursor:pointer;\" onClick=\"calendar_draw('"+calendar_y+"09')\" onMouseOver=\"this.style.backgroundColor='#c2c2c2';\" onMouseOut=\"this.style.backgroundColor='#e5e5e5';\">9</div>";</p><p>    html += "<div style=\"float:left; margin-left:2px; margin-top:1px; width:22px; height:20px; text-align:center; padding-top:2px; border:1px solid #c2c2c2; background-color:#e5e5e5; font-size:11px; cursor:pointer;\" onClick=\"calendar_draw('"+calendar_y+"10')\" onMouseOver=\"this.style.backgroundColor='#c2c2c2';\" onMouseOut=\"this.style.backgroundColor='#e5e5e5';\">10</div>";</p><p>    html += "<div style=\"float:left; margin-left:2px; margin-top:1px; width:22px; height:20px; text-align:center; padding-top:2px; border:1px solid #c2c2c2; background-color:#e5e5e5; font-size:11px; cursor:pointer;\" onClick=\"calendar_draw('"+calendar_y+"11')\" onMouseOver=\"this.style.backgroundColor='#c2c2c2';\" onMouseOut=\"this.style.backgroundColor='#e5e5e5';\">11</div>";</p><p>    html += "<div style=\"float:left; margin-left:2px; margin-top:1px; width:22px; height:20px; text-align:center; padding-top:2px; border:1px solid #c2c2c2; background-color:#e5e5e5; font-size:11px; cursor:pointer;\" onClick=\"calendar_draw('"+calendar_y+"12')\" onMouseOver=\"this.style.backgroundColor='#c2c2c2';\" onMouseOut=\"this.style.backgroundColor='#e5e5e5';\">12</div>";</p><p>    html += "</div>";</p><p>    </p><p>    // 달력 표시</p><p>    calendar_div.innerHTML = html;</p><p>    </p><p>    // IE/Maxton일때 숨겨진 select elements 표시</p><p>    if(hidden_select)</p><p>        show_select();</p><p>    </p><p>    // Crome, Firefox, Safari가 아니면 달력 영역과 겹치는 select elements 숨김</p><p>    if(navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Firefox') == -1 && navigator.userAgent.indexOf('Safari') == -1)</p><p>    {</p><p>        hide_select(parseInt(calendar_div.style.left), parseInt(calendar_div.style.top), parseInt(calendar_div.style.left) + parseInt(calendar_div.offsetWidth), parseInt(calendar_div.style.top) + parseInt(calendar_div.offsetHeight));</p><p>    }</p><p>}</p><p> </p><p>// 선택한 날짜를 input box에 넣어줌.</p><p>function calendar_set_date(set_date)</p><p>{</p><p>    var week_arr_han = new Array("일", "월", "화", "수", "목", "금", "토");</p><p>    var week_arr_eng = new Array("Sun", "Mon", "Tue", "Wed", "The", "Fri", "Sat");</p><p>    </p><p>    // FMT 변경 (YYYY-MM-DD)</p><p>    if(calendar_obj)</p><p>    {</p><p>        var year = set_date.substring(0,4);</p><p>        var month = set_date.substring(4,6);</p><p>        var day = set_date.substring(6,8);</p><p>        var sel_date = new Date(year, month - 1, day);</p><p>        var week = sel_date.getDay();</p><p>        </p><p>        var calendar_value = calendar_fmt;</p><p>        calendar_value = calendar_value.replace(/yyyy/i, year);</p><p>        calendar_value = calendar_value.replace(/mm/i, month);</p><p>        calendar_value = calendar_value.replace(/dd/i, day);</p><p>        calendar_value = calendar_value.replace(/wh/i, week_arr_han[week]);</p><p>        calendar_value = calendar_value.replace(/we/i, week_arr_eng[week]);</p><p>        </p><p>        calendar_obj.value = calendar_value;</p><p>    }</p><p>    calendar_close();</p><p>    </p><p>    // input object에 날짜를 셋팅하고 추가적으로 작업해야할 경우가 있어서</p><p>    // document에 calendar_set_date_after function이 있으면 실행하게 함.</p><p>    // calendar_set_date_after() 예제</p><p>    // if(document.getElementById('sdate').value < '2009-09-14')</p><p>    // {</p><p>    //     alert('9월 14일 보다 이전을 선택할 수 없습니다');</p><p>    // }</p><p>    if(typeof calendar_set_date_after == 'function')</p><p>    {</p><p>        calendar_set_date_after();</p><p>    }</p><p>}</p><p> </p><p>// 달력을 숨김</p><p>function calendar_hide()</p><p>{</p><p>    if(calendar_tt)</p><p>        window.clearTimeout(calendar_tt);</p><p>    calendar_close();</p><p>}</p><p> </p><p>// 300ms 후에 달력을 숨김</p><p>// mouseout때 바로 닫히지 않고 약간의 텀을 두어 다시 마우스가 갔을때 달력 레이어를 유지하기 위함</p><p>function calendar_afterHide()</p><p>{</p><p>    if(calendar_tt)</p><p>        window.clearTimeout(calendar_tt);</p><p>    calendar_tt = window.setTimeout("calendar_hide()", 300);</p><p>}</p><p> </p><p>// 달력 숨김 타이머를 삭제함.</p><p>function calendar_clearT()</p><p>{</p><p>    if(calendar_tt)</p><p>        window.clearTimeout(calendar_tt);</p><p>}</p><p> </p><p>// 년도 클릭시 월선택 레이어를 표시/감춤</p><p>// on -> off</p><p>// off -> on</p><p>function calendar_years_toggle()</p><p>{</p><p>    var calendar_div = document.getElementById('calendar_div');</p><p>    var calendar_years = document.getElementById('calendar_years');</p><p>    var calendar_months = document.getElementById('calendar_months');</p><p>    </p><p>    calendar_months.style.visibility = "hidden";</p><p>    </p><p>    // 달력의 년,월,닫기 부분은 표시되도록 상단에서 20px 내려서 표시함.</p><p>    var top = parseInt(calendar_div.style.top) + 20;</p><p>    var left = parseInt(calendar_div.style.left);</p><p>    </p><p>    // position:absolute; 이지만 달력 레이어의 상대성 절대좌표로 인식함.</p><p>    calendar_years.style.top = '20px';</p><p>    calendar_years.style.left = '0px';</p><p>    </p><p>    // 월선택 레이어 토글</p><p>    if(calendar_years.style.visibility == "hidden")</p><p>        calendar_years.style.visibility = "visible";</p><p>    else</p><p>        calendar_years.style.visibility = "hidden";</p><p>}</p><p> </p><p>// 월 클릭시 년도선택 레이어를 표시/감춤</p><p>// on -> off</p><p>// off -> on</p><p>function calendar_months_toggle()</p><p>{</p><p>    var calendar_div = document.getElementById('calendar_div');</p><p>    var calendar_months = document.getElementById('calendar_months');</p><p>    var calendar_years = document.getElementById('calendar_years');</p><p>    </p><p>    calendar_years.style.visibility = "hidden";</p><p>    </p><p>    // 달력의 년,월,닫기 부분은 표시되도록 상단에서 20px 내려서 표시함.</p><p>    var top = parseInt(calendar_div.style.top) + 20;</p><p>    var left = parseInt(calendar_div.style.left);</p><p>    </p><p>    // position:absolute; 이지만 달력 레이어의 상대성 절대좌표로 인식함.</p><p>    calendar_months.style.top = '20px';</p><p>    calendar_months.style.left = '0px';</p><p>    </p><p>    // 월선택 레이어 토글</p><p>    if(calendar_months.style.visibility == "hidden")</p><p>        calendar_months.style.visibility = "visible";</p><p>    else</p><p>        calendar_months.style.visibility = "hidden";</p><p>}</p><p> </p><p>// 달력표시 호출함수 onClick="calendar(event, 'ID')"로 호출</p><p>function calendar(e, obj_name, fmt)</p><p>{</p><p>    if(!e) var e = window.event;</p><p>    calendar_obj = document.getElementById(obj_name);</p><p>    // input object의 값에서 숫자만 추출함.</p><p>    var default_date = calendar_obj.value.replace(/[^0-9]/g, '');</p><p>    </p><p>    // YYYYMM 혹은 YYYYMMDD 형식이 아니면 무시함.</p><p>    if(default_date.length != 6 && default_date.length != 8)</p><p>        default_date = '';</p><p>    </p><p>    // onClick="calendar(event, 'ID')"의 ID Object가 없으면 달력을 표시해도 넣을곳이 없으므로 오류처리</p><p>    if(!calendar_obj)</p><p>    {</p><p>        alert(obj_name + ' object undefined');</p><p>        return;</p><p>    }</p><p>    </p><p>    if(fmt)</p><p>        calendar_fmt = fmt;</p><p>    else</p><p>        calendar_fmt = "YYYY-MM-DD";</p><p>    </p><p>    // 달력 레이어 초기화</p><p>    calendar_set(e);</p><p>    // 달력 표시</p><p>    calendar_draw(default_date);</p><p>}</p><p>