/* @charset=euc-kr */
/******************************************************************************
* Description :
* input=text object에 대한 Data Picker Script
* HTC로 개발하였으나, 잦은 IE 충돌로 인하여 변형함.
* IE 5.5 이상에서 테스트
* 사용법 : <input type="text" name="textbox" value="2006-01-01" isEmpty="true"  empty="날짜없음"
* arrowImage="/images/ico_dtp_def.gif" prevImage="/images/ico_arrow_left_gray.gif" nextImage="/images/ico_arrow_right_gray.gif">
* 해결 문제 : 해당객체의 disabled = true일때 이벤트 훅킹이 어려움, 이벤트에 따른 색상 교체 소스 최적화 -_-;;
* ** 
* Last update : 2006.
* Copyright (c) 2006, By Lee N.THU
* e-Mail : <support@x-wiz.com>
* - 사람이면 맘대로 쓸 수 있는 데, 단 제작자 표기는 해주삼.
* PS : 선택 시 SELECT BOX 또는 팝업창 형태인것이 불편해 4시간 동안 고민해서 제작 -.-, 년도 선택부분 시간관계상 생략
******************************************************************************/
var xwzDatePicker = function(objTextbox){
    if(window.__xwzDatePickers == null) window.__xwzDatePickers = new Array(0);
    this.index = window.__xwzDatePickers.length;
    window.__xwzDatePickers[this.index] = this;

    this.oText = objTextbox;
    this.dtCurrent = null;//입력된 날짜
    this.dtDisplay = new Date();//출력용 날짜
    this.objField =null;// 디스플레이 테이블
    this.objLabel = null;// 날짜 출력될 셀
    this.objArrow = null;// 화살표 셀
    this.imgArrow = null;// 화살표 이미지
    this.objSelectBox = null;// focus에 대한 효과를 주기 위한 SELECT BOX -> 레이어보다는 상위 객체이므로
    this.isEmpty = false;// 날짜 없음 을 출력할지 여부
    this.emptyValue = "";// 날짜 없음 표기 값
    this.isVisible = false;// 팝업창 보임 여부
    this.isActive = false;// 활성화되었는지 여부
    this.Images = {arrow : "", prev : "", next : ""};//디스플레이에서 화살표 이미지,  에서 이전, 다음 이미지
    this.Week = new Array(0);// 주 표기 텍스트 배열
    this.Formula = new Array(0);//날짜 포멧 형태
    this.WeekColor = ['#CC0000', '', '', '', '', '','#0066CC'];//일별 색상
    this.Styles = {def:new Array(0), hov:new Array(0), act:new Array(0), flt:new Array(0)}// 기본, 마우스 오버, 활성화 되었을 때 색상 설정, 활성화, 오버 되었을 때 오른쪽 화살표 필터효과 색상

    this.objWindow = null;//팝업창 객체
    this.lblCaption = null;// 에서 월, 년 표기 레이어
    this.lblEmpty = null;// 에서 날짜 없음 출력 객체
    this.cellCalendar = null;//의 각 셀을 배열로 저장

    this.setLanguage("ko");//기본 날짜 출력 포멧을 한글
    //기본 색상 설정
    this.setStyleColor("default:#ABC1DE,#EAF2FB,#740048;Hover:#ABC1DE,#FFFFFF,#740048;Active:#ABC1DE,#AEC4E8,#500040;filter:#E0D4B2,#FFD456,#E0D4B2,#FFD456");

    this.Initializ();//초기화
    this.oText.DatePick = this;//대상 텍스트 박스의 객체 속성으로 현재 function으로 지정
    //텍스트 박스의 프로퍼티가 변경될 때 분기함수
    this.oText.onpropertychange=function(){if(window.event.type == "propertychange" && this.DatePick !=null) this.DatePick.__setPropertyAttribute(window.event.propertyName);}
}
xwzDatePicker.prototype.Version            = '1.0.1' ;
/*=========================================================
날짜없음 출력여부 및 날짜없음 표시 문자 설정
=========================================================*/
xwzDatePicker.prototype.letDisplayEmpty = function(bool){this.isEmpty=eval(bool);if(this.lblEmpty!=null) this.lblEmpty.style.display = this.isEmpty ? '' : 'none'; }
xwzDatePicker.prototype.letEmptyValue = function(str){this.emptyValue=str;}
/*=========================================================
이미지 셋팅
=========================================================*/
xwzDatePicker.prototype.setArrowImageValue = function(str){this.Images.arrow = str;}
xwzDatePicker.prototype.setPrevImageValue = function(str){this.Images.prev = str;}
xwzDatePicker.prototype.setNextImageValue = function(str){this.Images.next = str;}
xwzDatePicker.prototype.letDisabled = function(bool){
    if(bool == true){
        this.objLabel.style.color="#666666";
        this.objLabel.style.filter="gray()";
        this.objArrow.style.filter="gray()";
    }else{
        this.objLabel.style.color="";
        this.objLabel.style.filter="";
        this.objArrow.style.filter="";
    }
}
/*=========================================================
주 표시 단위
=========================================================*/
xwzDatePicker.prototype.setLanguage = function(str){
    var WeekText = {"ch": ['日','月','火','水','木','金','土'],"ko" : ['일','월','화','수','목','금','토'],"en" : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']};
    var DateText = {"ch": ['月 ','日','年 '],"ko" : ['월 ','일', '년 '],"en" : ['-', '', '-']};
    if(WeekText[str] != null) this.Weeks = WeekText[str];else this.Weeks = WeekText["ko"];
    if(DateText[str] != null) this.Formula = DateText[str];else this.Formula = DateText["ko"];
}

/*=========================================================
마우스 오버등의 이벤트에 따른 색상 설정 함수
=========================================================*/
xwzDatePicker.prototype.setStyleColor = function(str){
    var Composition = new Array(0), Rule = new Array(0), sSelector = "", Colors = new Array(0);
    Composition = str.replace(/s/gi, '').toString().split(";")
    if(Composition.length == 0) return;
    for(var i = 0 ; i < Composition.length; i++){
        Composition[i] = Composition[i].replace(/s/gi, '');//무효문자 제거
        if(Composition[i] == '') continue;sSelector = Composition[i].split(':').shift();Colors = Composition[i].split(':').pop().toString().split(',');
        if(sSelector.toLowerCase() == 'default'){for(var n = 0; n < Colors.length;n++) this.Styles.def[n] = Colors[n];}
        else if(sSelector.toLowerCase() == 'hover'){for(var n = 0; n < Colors.length;n++) this.Styles.hov[n] = Colors[n];}
        else if(sSelector.toLowerCase() == 'active'){for(var n = 0; n < Colors.length;n++) this.Styles.act[n] = Colors[n];}
        else if(sSelector.toLowerCase() == 'filter'){for(var n = 0; n < Colors.length;n++) this.Styles.flt[n] = Colors[n];}
    }
}

/*=========================================================
값 변경에 따른 셋팅
=========================================================*/
xwzDatePicker.prototype.changeValue = function(sValue){
    if( (/^([0-9]){4}-([0-9]){2}-([0-9]){2}/).test(sValue) == true){
        this.dtCurrent = new Date(sValue.substr(0,4), sValue.substr(5,2)-1, sValue.substr(8,2));
        this.dtDisplay=this.dtCurrent;
        this.setDateValue(this.dtCurrent.getDate());
        this.display();//==재출력 시 자세히 보면 느려짐 re-drow 때문인듯 싶음. 해결하기 귀찬음, 일반사용자들 모름
    }else{
        this.setEmptyValue();
    }
}
xwzDatePicker.prototype.setEmptyValue = function(){
    this.oText.onpropertychange=new Function("return false");
    this.oText.value = "";
    this.objLabel.innerHTML = this.emptyValue;
    this.isVisible = true;
    this.swapVisible();
    this.oText.onpropertychange=function(){if(window.event.type=="propertychange"&&this.DatePick!=null) this.DatePick.__setPropertyAttribute(window.event.propertyName);}
}
/*=========================================================
선택된 날짜에 대한 출력
=========================================================*/
xwzDatePicker.prototype.setDateValue = function(day){

    this.oText.onpropertychange=new Function("return false");

    var year = this.dtDisplay.getYear(), month = this.dtDisplay.getMonth();
    this.dtCurrent = new Date(year, month, day);
    this.oText.value = year + "-" + this.__fillZero(month+1, 2) + "-" +  this.__fillZero(day, 2);
    this.objLabel.innerHTML = year + this.Formula[2] + this.__fillZero(month+1, 2) + this.Formula[0] +  this.__fillZero(day, 2) +this.Formula[1] ;
    this.isVisible = true;
    this.swapVisible();
    this.oText.onpropertychange=function(){if(window.event.type == "propertychange" && this.DatePick !=null) this.DatePick.__setPropertyAttribute(window.event.propertyName);}
}
/*=========================================================
프로퍼티 설정 -- 속성값이 변경될때
=========================================================*/
xwzDatePicker.prototype.__setPropertyAttribute = function(sType){
    switch(sType.toString()){
        case "isEmpty" : this.letDisplayEmpty(this.oText.getAttribute(sType));break;
        case "empty" : this.letEmptyValue(this.oText.getAttribute(sType));break;
        case "value" : this.changeValue(this.oText.getAttribute(sType));break;
        case "arrowImage" : this.setArrowImageValue(this.oText.getAttribute(sType));break;
        case "prevImage" : this.setPrevImageValue(this.oText.getAttribute(sType));break;
        case "nextImage" : this.setNextImageValue(this.oText.getAttribute(sType));break;
        case "colorStyle" : this.setStyleColor(this.oText.getAttribute(sType));break;
        case "language" : this.setLanguage(this.oText.getAttribute(sType));break;
        case "disabled" : this.letDisabled(this.oText.disabled);break;
        default : break;
    }
}
xwzDatePicker.prototype.__isPopupView = function(){{if(this.objWindow == null) return false;return this.objWindow.isOpen;}}
xwzDatePicker.prototype.__fillZero = function(num, len){if(num.toString().length >= len) return num;var nMax = len-( num.toString().length );var str = "";for(var i=0; i < nMax; i++) str +="0";return str + (num).toString();}
/*=========================================================
마우스 이벤트에 따른 효과 - 최적화 필요 -.-;; 귀찮아서 안하고 있음
=========================================================*/
xwzDatePicker.prototype.hoverIn = function(){
    if(this.isActive == false && this.oText.disabled == false){
        this.objField.style.border=this.Styles.hov[0] + " 1px solid" ;
        this.objField.style.backgroundColor=this.Styles.hov[1] ;

        this.objLabel.style.border=this.Styles.hov[1] + " 1px solid";
        this.objLabel.style.backgroundColor=this.Styles.hov[1] ;
        this.objLabel.style.color=this.Styles.hov[2];

        this.objArrow.style.border=this.Styles.hov[0] + " 1px solid";
        this.objArrow.style.backgroundColor=this.Styles.hov[1] ;
        this.objArrow.style.color=this.Styles.hov[1];
        this.objArrow.style.filter="progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr="+this.Styles.flt[0]+",endColorStr="+this.Styles.flt[1]+");";
    }
}
xwzDatePicker.prototype.hoverOut = function(){
    if(this.isActive == false && this.oText.disabled == false){
        this.objField.style.border=this.Styles.def[0] + " 1px solid" ;
        this.objField.style.backgroundColor=this.Styles.def[1] ;

        this.objLabel.style.border=this.Styles.def[1] + " 1px solid";
        this.objLabel.style.backgroundColor=this.Styles.def[1] ;
        this.objLabel.style.color=this.Styles.def[2];

        this.objArrow.style.border=this.Styles.def[1] + " 1px solid";
        this.objArrow.style.backgroundColor=this.Styles.def[1] ;
        this.objArrow.style.color=this.Styles.def[1];
        this.objArrow.style.filter="";
    }
}

xwzDatePicker.prototype.deactive = function(){
    if(this.oText.disabled == false){
        this.isActive = false;
        this.objField.style.border=this.Styles.def[0] + " 1px solid" ;
        this.objField.style.backgroundColor=this.Styles.def[1] ;

        this.objLabel.style.border=this.Styles.def[1] + " 1px solid";
        this.objLabel.style.backgroundColor=this.Styles.def[1] ;
        this.objLabel.style.color=this.Styles.def[2];

        this.objArrow.style.border=this.Styles.def[1] + " 1px solid";
        this.objArrow.style.backgroundColor=this.Styles.def[1] ;
        this.objArrow.style.color=this.Styles.def[1];
        this.objArrow.style.filter="";
    }
}
xwzDatePicker.prototype.active = function(){
    if(this.oText.disabled == false){
        this.isActive = true;
        this.objField.style.border=this.Styles.act[0] + " 1px solid" ;
        this.objField.style.backgroundColor=this.Styles.hov[1] ;

        this.objLabel.style.border=this.Styles.act[1] + " 1px solid";
        this.objLabel.style.backgroundColor=this.Styles.act[1] ;
        this.objLabel.style.color=this.Styles.act[2];

        this.objArrow.style.border=this.Styles.act[0] + " 1px solid";
        this.objArrow.style.backgroundColor=this.Styles.act[1] ;
        this.objArrow.style.color=this.Styles.act[1];
        this.objArrow.style.filter="progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr="+this.Styles.flt[2]+",endColorStr="+this.Styles.flt[3]+");";
    }
}
/* ================================================
팝업창 출력 결정
================================================ */
xwzDatePicker.prototype.swapVisible = function(){

    if(this.isVisible == false){
        if(this.oText.disabled == false && this.objWindow != null){
            var nHeight = 164;
            if(this.isEmpty == true) nHeight =183;
            var nDiff = window.screen.height - window.event.screenY - nHeight;posY = nDiff < nHeight ?  nHeight *-1 : this.objField.offsetHeight;
            this.objWindow.show(0, posY, 139, nHeight, this.objField);
            this.objWindow.document.getElementById('IDS_MONTH_LIST').style.display = "none";
            this.active();
            this.isVisible = true;
        }
    }else{
        this.deactive();
        if(this.__isPopupView()==true) this.objWindow.hide();
        this.objSelectBox.focus();
        this.isVisible = false;
        setTimeout("window.__xwzDatePickers[" +this.index + "].display()", 30);
    }
}
/* ================================================
초기화 함수
insertRow(index) <= 요게 편한데 -.- 파이어폭스에서도 지원
================================================ */
xwzDatePicker.prototype.Initializ = function(){
    var bwver = new Number(((window.navigator.appVersion.split('; '))[1].split(' '))[1]);
    if(window.navigator.appName != "Microsoft Internet Explorer" || bwver < 5.5) return;
    //== 기본변수대입
    var sValue=this.oText.getAttribute("value");
    if(sValue != "" && sValue != null) this.dtCurrent = new Date(sValue.substr(0,4), sValue.substr(5,2)-1, sValue.substr(8,2));
    if(isNaN(this.dtCurrent) || this.dtCurrent == null){this.oText.value="";this.dtCurrent=new Date();}
    this.dtDisplay=this.dtCurrent;
    var attributes = ["isEmpty","empty", "arrowImage", "prevImage","nextImage", "colorStyle", "language"];
    for(var i = 0; i < attributes.length; i++){
        if(this.oText.getAttribute(attributes[i]) == null || this.oText.getAttribute(attributes[i]) =="" ) continue;
        this.__setPropertyAttribute(attributes[i]);
    }

    var row = null;
    //=== 테이블 생성
    this.objField = document.createElement("TABLE");
    this.objField.setAttribute('cellPadding', 1);
    this.objField.setAttribute('cellSpacing', 1);
    this.objField.style.display='inline' ;
    this.objField.style.verticalAlign = "bottom";
    this.objField.style.margin="0 0 0 0";
    this.objField.style.padding="0 0 0 0";
     this.objField.style.border=this.Styles.def[0] + " 1px solid" ;
    this.objField.style.backgroundColor=this.Styles.def[1];

    this.objField.onmouseover=new Function("window.__xwzDatePickers[" +this.index + "].hoverIn()");
    this.objField.onmouseout=new Function("window.__xwzDatePickers[" + this.index+ "].hoverOut()");

    //=== Row 생성
    var tBody = document.createElement("TBODY");
    this.objField.appendChild(tBody);

    row = document.createElement("TR");
    row.style.cssText = "";
    row.onmousedown=new Function("window.__xwzDatePickers[" +this.index + "].swapVisible()");

    //=== 디스플레이 cell 생성
    this.objLabel = document.createElement("TD");
    this.objLabel.onselectstart=new Function("return false");
    this.objLabel.setAttribute("vAlign", "absmiddle");
    if(this.oText.value == ""){
        this.objLabel.setAttribute("innerText", this.emptyValue);
    }else{
        this.objLabel.innerHTML = this.dtDisplay.getYear() + this.Formula[2] + this.__fillZero(this.dtDisplay.getMonth()+1, 2) + this.Formula[0] +  this.__fillZero(this.dtDisplay.getDate(), 2) + this.Formula[1];
    }
    this.objLabel.style.cssText = "";
    this.objLabel.style.width=116;
    this.objLabel.style.height=19;
    this.objLabel.style.font="normal normal normal 8pt 돋음";
    this.objLabel.style.cursor="default";
    this.objLabel.style.textAlign="center";
    this.objLabel.style.verticalAlign="text-bottom";
    this.objLabel.style.margin="0 0 0 0";
    this.objLabel.style.padding="0 0 0 0";

    this.objLabel.style.border=this.Styles.def[1] + " 1px solid";
    this.objLabel.style.backgroundColor=this.Styles.def[1] ;
    this.objLabel.style.color=this.Styles.def[2];
    row.appendChild(this.objLabel);

    //=== 화살표 생성
    this.imgArrow=document.createElement("IMG");
    this.imgArrow.src = this.Images.arrow;
    this.imgArrow.valign = "bottom";
    this.imgArrow.style.cssText = "";
    this.objSelectBox = document.createElement("SELECT");
    this.objSelectBox.style.cssText="border:0;margin:0;padding:0;width:0;font: 1pt";
    this.objSelectBox.onfocus=new Function("window.__xwzDatePickers[" +this.index + "].active()");
    this.objSelectBox.onblur=new Function("window.__xwzDatePickers[" +this.index + "].deactive()");

    this.objArrow= document.createElement("TD");
    this.objArrow.onselectstart=new Function("return false");
    this.objArrow.style.margin="0 0 0 0";
    this.objArrow.style.padding="0 3 0 3";
    this.objArrow.style.border=this.Styles.def[1] + " 1px solid";
    this.objArrow.style.backgroundColor=this.Styles.def[1] ;
    this.objArrow.style.color=this.Styles.def[1];
    this.objArrow.appendChild(this.imgArrow);
    this.objArrow.appendChild(this.objSelectBox);
    this.objSelectBox.options[0] = new Option('xwz','xwz')
    row.appendChild(this.objArrow);
    tBody.appendChild(row);
    this.oText.insertAdjacentElement("afterEnd", this.objField);
    
    if(this.oText.disabled == true) this.__setPropertyAttribute('disabled');

    this.oText.style.width='0px';this.oText.style.visibility='hidden';
    this.createWindow();
    this.InitializCalendar();
    this.

facebook posting twit

  • 어떤 프로세스가 메모리를 가장 많이 차지하는지 알아보는 방법?
  • root password 까먹었을때?
  • 지정날짜에 이미지 보여주기 혹은 감추기
  • 구글 메일(GMail)로 메일 발송하기
  • window 스스로 닫기
  • AJAX 컨트롤 많이 있겠지만, Form 메소드 형태로
  • telnet 접속이 내부는 되는데 외부는 안되는 경우
  • PHP3를 사용하려면
  • 개인 계정에 대한 쿼터 설정 방법
  • 메일을 보내면 릴레이를 거부하는데?
    Tagged on:     
  • Leave a Reply