JavaScript로 만든 달력(popup 객체사용) | |||
| |||
/****************************************************************************** * 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. Tags: JavaScript 달력 | |||
| |||
| |||
로그인을 하시면 댓글을 등록 할 수 있습니다. |
SIMILAR POSTS AJAX 컨트롤 많이 있겠지만, Form 메소드 형태로 |
OTHER POSTS IN THE SAME CATEGORY 금액을 입력할때 세자리마다 컴마찍기 |