[HTML|CSS|JS] 달력 계산기 만들기

 

See the Pen naver_cal by 정소연 (@jeongsoyeon) on CodePen.

---

입력 내용 초기화 함수

function init() {
	document.getElementById("baseDate").value = ""; 
	document.getElementById("afterDate").value = ""; 
	document.getElementById("afterDay").value = ""; 
	document.getElementById("birth").value = "";  
	
	document.getElementById("resultDate1").value = ""; 
	document.getElementById("resultDate2").value = ""; 
	document.getElementById("resultAge").value = ""; 

	return true;
	
}

 

 

날짜 유효성 검사 함수

function isValidDate(date) {
	if(date.length !== 8 && date.length !== 10) return false;
	
	let p = /(\.)|(\-)|(\/)/g;
	
	date = date.replace(p, '');
	if(date.length !== 8) return false;
	
	p = /^[12][0-9]{7}$/;
	if(!p.test(date)) return false;
	
	let y = parseInt(date.substring(0,4));
	let m = parseInt(date.substring(4,6));
	let d = parseInt(date.substring(6));
	
	if(m<1 || m>12) 
		return false;
	let lastDay = (new Date(y,m,0)).getDate(); // m월의 마지막 일자 
	if(d < 1 || d > lastDay) 
		return false;
	
	return true;
}

 

디데이 구하기: yyyy-mm-dd ~ yyyy-mm-dd 사이의 날일 (~까지 며칠)

function afterDateResult() {
	let baseDate = document.querySelector("#baseDate").value;
	let endDate = document.querySelector("#afterDate").value;
	let p = /(\.)|(\-)|(\/)/g;
	
	baseDate = baseDate.replace(p, '');
	endDate = endDate.replace(p, '');
	
	if( ! isValidDate(baseDate)) {
		throw "날짜 형식이 올바르지 않습니다. ";
	}
	
	if( ! isValidDate(endDate)) {
		throw "날짜 형식이 올바르지 않습니다. ";
	}
	
	let sy = parseInt(baseDate.substring(0,4));
	let sm = parseInt(baseDate.substring(4,6));
	let sd = parseInt(baseDate.substring(6));
	
	let ey = parseInt(endDate.substring(0,4));
	let em = parseInt(endDate.substring(4,6));
	let ed = parseInt(endDate.substring(6));
	
	let sdate = new Date(sy, sm-1, sd);
	let edate = new Date(ey, em-1, ed);
	
	let st = sdate.getTime();
	let et = edate.getTime();
	
	let dif = et - st;
	let day = Math.floor(dif / (24*60*60*1000));
	
	out = 'D-'+day;
	
	// document.querySelector("#resultDate2").innerHTML = out;
	document.getElementById("resultDate2").value = out;
	
}

 

yyyy-mm-dd에 날일 더한 날짜 구하기

 

function afterDayResult() {

	let baseDate = document.querySelector("#baseDate").value;
	let Dday = document.querySelector("#afterDay").value;
	let p = /(\.)|(\-)|(\/)/g;
	
	baseDate = baseDate.replace(p, '');
	
	if( ! isValidDate(baseDate)) {
		throw "날짜 형식이 올바르지 않습니다. ";
	}
	
	let by = parseInt(baseDate.substring(0,4));
	let bm = parseInt(baseDate.substring(4,6));
	let bd = parseInt(baseDate.substring(6));
	
	Dday = parseInt(Dday);
	
	let dday = new Date(by, bm-1, bd);
	
	dday.setDate(dday.getDate() + Dday);
	
	let dy = dday.getFullYear();
	let dm = dday.getMonth()+1;
	let dd = dday.getDate();
	
	out = (dy+'-'+dm+'-'+dd);
	
	// document.querySelector("#resultDate1").innerHTML = out;
	document.getElementById("resultDate1").value = out;
}

 

나이 구하기 (만나이, 생일 고려)

function birthResult() {
	const today = new Date();
	let birth = document.querySelector("#birth").value;
	let p = /(\.)|(\-)|(\/)/g;
	
	birth = birth.replace(p, '');
	
	if( ! isValidDate(birth)) {
		throw "날짜 형식이 올바르지 않습니다. ";
	}
	
	let age;
	let ty = today.getFullYear();
	let tm = today.getMonth();
	let td = today.getDate();
	
	let by = parseInt(birth.substring(0,4));
	let bm = parseInt(birth.substring(4,6));
	let bd = parseInt(birth.substring(6));
	
	age = ty - by;
	
	if ((tm<bm) || ((bm-tm) === 0 && td < bd) ) {
	    age--;
	}
	
	out = '만 '+age+'세';
	
	// document.querySelector("#resultAge").innerHTML = out;
	document.getElementById("resultAge").value = out;
	
}