본문 바로가기

javascript/Example

[javascript] (exam) 날짜 선택 제한 하기.

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;
		}	
		}
}