javascript/Example2011.10.07 16:36

1. 시작 날과 끝 날을 일정 기간 내로 제한두기.
2. 시작 날 선택시 특정 기간으로 자동 세팅.

조건
날짜 입력 폼의 모습은 아래와 같음.

 

or

 

or

 


현재달 포함 이전 3달까지만 날짜 설정 가능.
자동 세팅은 1달로.
기타 이용자 편의....인지 귀찮음인지 알수 없는 인터페이스 추가되어있음. 

구성.
이미지 버튼 클릭스 달력 컴포넌트가 떠, 그를 이용하여 날짜가 선택됨.
form의 textfield의 onChange이벤트 이용.
imagebutton의 onClick 이벤트 이용.
객체이름은 차례대로 year1,month1,day1,image1,year2,month2,day2,image2


소스.

 
var chkbtt = null;
function datechk(){
	var startDate = new Date(getFormElemVal(FRM_FILTER, 'text', 0),getFormElemVal(FRM_FILTER, 'text', 1) - 1,getFormElemVal(FRM_FILTER, 'text', 2));
	var endDate = new Date(getFormElemVal(FRM_FILTER, 'text', 3),getFormElemVal(FRM_FILTER, 'text', 4) - 1,getFormElemVal(FRM_FILTER, 'text', 5));

	var now = new Date();
	//var nowDate = new Date(now.getFullYear(),now.getMonth(),now.getDate());	
	var onePD = new Date();
	//onePD.setMonth(now.getMonth()-1);
	var pastD = new Date(now.getFullYear(),now.getMonth()-2,1,0,0,0,0);
	var limitNow = new Date(now.getFullYear(),now.getMonth()+1,1,0,0,0,0);
		
	
	if(endDate.getTime()=limitNow.getTime()){
		alert("날짜 선택을 다시 하십시오. \n검색은 현재달로부터 3개월 이전까지 가능합니다.");
		
		getFormElem(FRM_FILTER, 'text', 0).value = onePD.getFullYear();
		getFormElem(FRM_FILTER, 'text', 1).value = fillZero(onePD.getMonth(),2);
		getFormElem(FRM_FILTER, 'text', 2).value = fillZero(onePD.getDate(),2);	
		getFormElem(FRM_FILTER, 'text', 3).value = now.getFullYear();
		getFormElem(FRM_FILTER, 'text', 4).value = fillZero(now.getMonth()+1,2);
		getFormElem(FRM_FILTER, 'text', 5).value = fillZero(now.getDate(),2);
		
		return;		
	}
	
	var resultDt = Math.floor(endDate.valueOf()/(24*60*60*1000)-startDate.valueOf()/(24*60*60*1000));
	if(chkbtt!="img1"){
	if(resultDt < 0)
	{
		onePD.setMonth(endDate.getMonth()-1,endDate.getDate());
		if(onePD.getTime()<=pastD.getTime()){
			onePD.setMonth(pastD.getMonth(),1);
		}		
		//alert("시작날짜가 더 큽니다.");
		getFormElem(FRM_FILTER, 'text', 0).value = onePD.getFullYear();
		getFormElem(FRM_FILTER, 'text', 1).value = fillZero(onePD.getMonth()+1,2);
		getFormElem(FRM_FILTER, 'text', 2).value = fillZero(onePD.getDate(),2);		
		
		return;
	}}	
	
	
	startDate.setDate(1);
	endDate.setDate(1);
	if(startDate.getTime()=limitNow.getTime()){
		alert("조회는 현재 달까지만 가능 합니다");
		getFormElem(FRM_FILTER, 'text', 3).value = now.getFullYear();
		getFormElem(FRM_FILTER, 'text', 4).value = fillZero(now.getMonth()+1,2);
		getFormElem(FRM_FILTER, 'text', 5).value = fillZero(now.getDate(),2);
		
		return;
	}	}
	
	//alert(document.getElementById("image2").value);
	
	if(chkbtt=="img1"){
		changeED();
	}
	
}

function changeED(){
	var now = new Date();
	var startDate = new Date(getFormElemVal(FRM_FILTER, 'text', 0),getFormElemVal(FRM_FILTER, 'text', 1) - 1,getFormElemVal(FRM_FILTER, 'text', 2));
	startDate.setMonth(startDate.getMonth()+1);
	var limitNow = new Date(now.getFullYear(),now.getMonth()+1,1,0,0,0,0);
	
	if(startDate.getTime()>=limitNow.getTime()){
		limitNow.setDate(limitNow.getDate()-1);
		getFormElem(FRM_FILTER, 'text', 3).value = limitNow.getFullYear();
		getFormElem(FRM_FILTER, 'text', 4).value = fillZero(limitNow.getMonth()+1,2);
		getFormElem(FRM_FILTER, 'text', 5).value = fillZero(limitNow.getDate(),2);
		
	}
	else{
		getFormElem(FRM_FILTER, 'text', 3).value = startDate.getFullYear();
		getFormElem(FRM_FILTER, 'text', 4).value = fillZero(startDate.getMonth()+1,2);
		getFormElem(FRM_FILTER, 'text', 5).value = fillZero(startDate.getDate(),2);
		
	}	
	//alert(startDate.getTime()+"?"+limitNow.getTime());
}

function chkbtn(name){
	chkbtt=name;
}

비슷한 형식으로 일자단위(여기서는 7일)로 날짜 제한하는 스크립트 소스.

 
function datechk(){
	var startDate = new Date(document.getElementById("year1").value, document.getElementById("month1").value - 1,document.getElementById("day1").value);
	var endDate = new Date(document.getElementById("year2").value, document.getElementById("month2").value - 1, document.getElementById("day2").value);
	var now = new Date();
	var nowDate = new Date(now.getFullYear(),now.getMonth(),now.getDate());	
	
	var resultDt = Math.floor(endDate.valueOf()/(24*60*60*1000)-startDate.valueOf()/(24*60*60*1000));
	var limitpast = Math.floor(nowDate.valueOf()/(24*60*60*1000)-startDate.valueOf()/(24*60*60*1000));
	var currentDt = Math.floor(nowDate.valueOf()/(24*60*60*1000)-endDate.valueOf()/(24*60*60*1000));
	
	var setpastD = nowDate.valueOf() + (1000 * 60 * 60 * 24 * -6);	
	var pastD = new Date(setpastD);
	
	if (!document.getElementById("radio01_2").checked){
		if(resultDt < 0)
		{
			alert("시작날짜가 더 큽니다.");
			document.getElementById("year1").value = pastD.getFullYear();
			document.getElementById("month1").value = fillZero(pastD.getMonth()+1,2);
			document.getElementById("day1").value = fillZero(pastD.getDate(),2);
			document.getElementById("year2").value = now.getFullYear();
			document.getElementById("month2").value = fillZero(now.getMonth()+1,2);
			document.getElementById("day2").value = fillZero(now.getDate(),2);
			return;
		}	
		if(limitpast > 6){
			alert("현재부터 7일 이전까지만 검색이 가능합니다.");
			document.getElementById("year1").value = pastD.getFullYear();
			document.getElementById("month1").value = fillZero(pastD.getMonth()+1,2);
			document.getElementById("day1").value = fillZero(pastD.getDate(),2);
			return;
		}
		if(currentDt < 0){
			alert("오늘 날짜 이후로는 검색이 불가능 합니다.");
			document.getElementById("year2").value = now.getFullYear();
			document.getElementById("month2").value = fillZero(now.getMonth()+1,2);
			document.getElementById("day2").value = fillZero(now.getDate(),2);
			return;
		}	
		}
}
Posted by 하품 - yawn 하품 - yawn

댓글을 달아 주세요

  1. DashBell

    일주일 단위로 날짜 선택 제한 및 오늘 기준으로 부터 1달까지만 선택, 딱 제가 찾고있는 로직인데 이걸 어떻게 응용해야할지 감이 안잡히네요 헐;;

    2011.12.03 13:49 [ ADDR : EDIT/ DEL : REPLY ]
  2. DashBell

    안녕하세요. 질문 드려도 될까요? 프레임워크에서 작업중인데 달력 기능은 있구요.. 스크립트로 날짜 검색시 제어를 해야될거 같은데 getFormElemVal <-- 요게 뭘 뜻하는 건지 잘 모르겠네요.. 검색해봤는데 메서드는 아닌거 같은데..
    해당 인풋박스명만 바꿔주면 되는걸까요?

    2011.12.03 14:13 [ ADDR : EDIT/ DEL : REPLY ]
    • 무슨소린가 하고 봤더니... 제가 따로 사용하는 자바스크립트api가 있는데, 그안의 함수를 안고치고 그대로 올려놨었네요-_-;;;
      설명을 드리자면 getFormElemVal 은 선택된 엘레먼트의 값을 가져오는 함수입니다. 기본으로 제공되는게 아니라 직접 만든함수예요.
      이는 getElementById로 대체가 가능합니다.
      예를 들어 "year1"이란 id를 가진 개체가 있다면 getElementById("year1").value 와 같은 기능을 해요-

      2011.12.06 14:21 신고 [ ADDR : EDIT/ DEL ]
    • 추가로 fillzero는 제가 사용하는 달력컴포넌트에 들어있는 함수입니다. 날짜가 1자리 숫자일대 앞에 0자를 붙여주는 역할을 합니다.
      EX> 2 -> 02

      2011.12.06 14:35 신고 [ ADDR : EDIT/ DEL ]