날짜조회 형태

지정된 날짜 범위내에서 시작날짜와 종료 날짜를 구한다.

📌 input 날짜 형태

~ 조회

📝 html

<input type="text" id="startdate" class="calendar" value="">
<input type="text" id="enddate" class="calendar" value="">
<a href="javascript:searchDate();">조회</a>

날짜조회 유효성

📌 keyup/kyedown 이벤트

📝 javascript

//조회날짜 숫자만 입력 유효성 체크
$(".calendar").keypress(function(event) {
	if (event.which < 48 || event.which > 57) {
		event.preventDefault();
	}
});

var RegNotNum = /[^0-9]/g;
$(".calendar").attr("maxlength", 10); // 최대길이 설정
$(".calendar").keyup(function() {
	// 숫자만 남기기
	var date = this.value;
	date = date.replace(RegNotNum, ''); 
	if (date == "" || date == null || date.length < 5) {
		this.value = date;
		return;
	}
		
	// 날짜 포맷(yyyy-mm-dd) 만들기
	var DataFormat;
	var RegPhonNum;
	if (date.length <= 6) {
		DataFormat = "$1-$2"; // 포맷을 바꾸려면 이곳을 변경
		RegPhonNum = /([0-9]{4})([0-9]+)/;
	} else if (date.length <= 8) {
		DataFormat = "$1-$2-$3"; // 포맷을 바꾸려면 이곳을 변경
		RegPhonNum = /([0-9]{4})([0-9]{2})([0-9]+)/;
	}
		
	// 모두 입력됐을 경우 날짜 유효성 확인
	date = date.replace(RegPhonNum, DataFormat);
	this.value = date;
	if (date.length == 10) {
		var isVaild = true;
		if (isNaN(Date.parse(date))) {
			// 유효 날짜 확인 여부
			isVaild = false;
		} else {
			// 년, 월, 일 0 이상 여부 확인
			var date_sp = date.split("-");
			date_sp.forEach(function(sp) {
				if (parseInt(sp) == 0) {
					isVaild = false;
				}
			});
			// 마지막 일 확인
			var last = new Date(new Date(date).getFullYear(), new Date(date).getMonth()+1, 0);
			// 일이 달의 마지막날을 초과했을 경우 다음달로 자동 전환되는 현상이 있음 (예-2월 30일 -> 3월 1일)
			if (parseInt(date_sp[1]) != last.getMonth()+1) {
				var date_sp2 = date_sp.slice(0);
				date_sp2[2] = '01';
				var date2 = date_sp2.join("-");
				last = new Date(new Date(date2).getFullYear(), new Date(date2).getMonth()+1, 0);
			}
			if (last.getDate() < parseInt(date_sp[2])) {
				isVaild = false;
			}
		}
		if (!isVaild) {
			alert("잘못된 날짜입니다. 다시 입력해주세요.");
			this.value = "";
			this.focus();
			return;
		}
	}
});

👉 1. 길이 변경시 maxlength를 변경해 준다.
👉 2. 날짜포맷을 바꾸려면 변수 DataFormat을 수정한다.

📌 날짜 조회 클릭시

📝 javascript

function searchDate(){
	// 입력 데이터 세팅
	var startDate = $("#startdate").val(); //시작일
	var endDate = $("#enddate").val(); //종료일
	var startHy = startDate.split('-'); //시작날짜 하이픈 제거
	var endHy = endDate.split('-'); //종료날짜 하이픈 제거
		
	// 빈값 및 입력유효성 추가
	if(startDate == ""){
		alert("시작날짜를 입력해 주세요.");
		return;
	}
	if(endDate == ""){
	    alert("종료날짜를 입력해 주세요.");
	    return;
	}
    // 월 입력 유효성
	if(Number(startHy[1]) > 12 || Number(startHy[1]) < 1 || Number(endHy[1]) > 12 || Number(endHy[1]) < 1){
		alert("올바른 날짜를 입력해 주세요.");
	    $("#startdate").val("");
   		$("#enddate").val("");
	    return;
	}
}

📌 특정 기간 이상 조회불가

📝 javascript

function searchDate(){
	// 입력 데이터 세팅
	var startDate = $("#startdate").val(); //시작일
	var endDate = $("#enddate").val(); //종료일
	var startHy = startDate.split('-'); //시작날짜 하이픈 제거
	var endHy = endDate.split('-'); //종료날짜 하이픈 제거
    var startArr = new Date(startHy[0], startHy[1], startHy[2]); //시작날짜 년월일 배열 구하기
	var endArr = new Date(endHy[0], endHy[1], endHy[2]); //종료날짜 년월일 배열 구하기
	var dayDate = endArr - startArr; //종료날짜에서 시작날짜 계산
	var cDay = 24 * 60 * 60 * 1000; // 시 * 분 * 초 * 밀리세컨
	var cMonth = cDay * 31; // 월
		
	// 빈값 및 입력유효성 추가
	if(startDate == ""){
		alert("시작날짜를 입력해 주세요.");
		return;
	}
	if(endDate == ""){
	    alert("종료날짜를 입력해 주세요.");
	    return;
	}
    // 월 입력 유효성
	if(Number(startHy[1]) > 12 || Number(startHy[1]) < 1 || Number(endHy[1]) > 12 || Number(endHy[1]) < 1){
		alert("올바른 날짜를 입력해 주세요.");
	    $("#startdate").val("");
   		$("#enddate").val("");
	    return;
	}
    
    // 3개월까지만 조회조건 추가
	if(startDate && endDate){
		var overMonth = parseInt(dayDate/cMonth);
		if(dayDate < 0){
			alert("조회기간은 종료날짜를 시작날짜보다 뒤로 지정해야 조회 가능합니다.");
			$('input[name=endDate]').attr('value','');
			return;
		}
		if(overMonth > 2){
			alert("조회기간은 3개월 까지만 조회 가능합니다.");
			$('input[name=startDate]').attr('value','');
			$('#startDate').flatpickr().jumpToDate();
			startInput();
			return;
		}
	}		
}

👉 1. 조회기간을 늘릴려면 overMonth의 기간을 구하고자 하는 조회 기간의 -1을 한 값을 넣는다.