자바스크립트로 날짜 계산할 경우가 많습니다. 요즘이야 뭐 달력들이 워낙 잘 나와서 그 수고를 덜긴 하는데.. 그래도 코딩으로 계산해야 하는 경우가 종종 있죠.
얼마전에 그 작업을 하다 짜증이 나서 확 만들었습니다만;;;;; 대충 만든거라 참고만 하시구요.
응용해서 사용하세요. 먼저 미리보기부터 보시고 아래쪽에 소스코드를 올리겠습니다.
미리보기
아래는 소스
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--
function calcDate(){
var s = document.getElementById('stDt').value;
document.getElementById("r1").innerText = getDt1(s); //기준월 첫날
document.getElementById("r2").innerText = getDt2(s); //기준월 말일
document.getElementById("r3").innerText = getDt3(s); //이전달 첫날
document.getElementById("r4").innerText = getDt4(s); //이전달 말일
document.getElementById("r5").innerText = getDt5(s); //다음달 첫날
document.getElementById("r6").innerText = getDt6(s); //다음달 말일
}
//기준월 첫날
function getDt1(dt){
var newDt = new Date(dt);
newDt.setDate(1);
return converDateString(newDt);
}
//기준월 말일
function getDt2(dt){
var newDt = new Date(dt);
newDt.setMonth( newDt.getMonth() + 1);
newDt.setDate(0);
return converDateString(newDt);
}
//이전달 첫날
function getDt3(dt){
var newDt = new Date(dt);
newDt.setMonth( newDt.getMonth() - 1 );
newDt.setDate( 1);
return converDateString(newDt);
}
//이전달 말일
function getDt4(dt){
var newDt = new Date(dt);
newDt.setMonth( newDt.getMonth() );
newDt.setDate(0);
return converDateString(newDt);
}
//다음달 첫날
function getDt5(dt){
var newDt = new Date(dt);
newDt.setMonth( newDt.getMonth() + 1 );
newDt.setDate( 1);
return converDateString(newDt);
}
//다음달 말일
function getDt6(dt){
var newDt = new Date(dt);
newDt.setMonth( newDt.getMonth() + 2 );
newDt.setDate(0);
return converDateString(newDt);
}
//몇달 후 말일
function getDt7(s, i){
var newDt = new Date(s);
newDt.setMonth( newDt.getMonth() + i );
newDt.setDate(0);
return converDateString(newDt);
}
//몇달 후 첫날
function getDt8(s, i){
var newDt = new Date(s);
newDt.setMonth( newDt.getMonth() + i );
newDt.setDate(1);
return converDateString(newDt);
}
//몇일 전
function getDt9(s, i){
var newDt = new Date(s);
newDt.setDate( newDt.getDate() - i );
return converDateString(newDt);
}
//몇일 후
function getDt10(s, i){
var newDt = new Date(s);
newDt.setDate( newDt.getDate() + i );
return converDateString(newDt);
}
window.onload = function(){
var dt = new Date();
document.getElementById('stDt').value = converDateString(dt);
}
function converDateString(dt){
return dt.getFullYear() + "-" + addZero(eval(dt.getMonth()+1)) + "-" + addZero(dt.getDate());
}
function addZero(i){
var rtn = i + 100;
return rtn.toString().substring(1,3);
}
function calc2(){
var s = document.getElementById('stDt').value;
var i = document.getElementById('il1').value;
document.getElementById("r7").innerText = getDt7(s, parseInt(i) + 1); //몇달 후 말일
}
function calc3(){
var s = document.getElementById('stDt').value;
var i = document.getElementById('il2').value;
document.getElementById("r8").innerText = getDt8(s, parseInt(i)); //몇달 후 첫날
}
function calc4(){
var s = document.getElementById('stDt').value;
var i = document.getElementById('il3').value;
document.getElementById("r9").innerText = getDt9(s, parseInt(i)); //몇일 전
}
function calc5(){
var s = document.getElementById('stDt').value;
var i = document.getElementById('il4').value;
document.getElementById("r10").innerText = getDt10(s, parseInt(i)); //몇일 후
}
//-->
</script>
</head>
<body>
<div>기준일자 : <input type="text" id="stDt" value=""> (형식 : 0000-00-00) <input type="button" value="날짜계산" onclick="calcDate()"><div>
<p>기준월 첫날 : <span id="r1"></span></p>
<p>기준월 말일 : <span id="r2"></span></p>
<p>이전달 첫날 : <span id="r3"></span></p>
<p>이전달 말일 : <span id="r4"></span></p>
<p>다음달 첫날 : <span id="r5"></span></p>
<p>다음달 말일 : <span id="r6"></span></p>
<p><input type="text" id="il2"> 달 후 첫날 <input type="button" value="계산" onclick="calc3()">
<span id="r8"></span></p>
<p><input type="text" id="il1"> 달 후 말일 <input type="button" value="계산" onclick="calc2()">
<span id="r7"></span></p>
<p><input type="text" id="il3"> 일 전 일자 <input type="button" value="계산" onclick="calc4()">
<span id="r9"></span></p>
<p><input type="text" id="il4"> 일 후 일자 <input type="button" value="계산" onclick="calc5()">
<span id="r10"></span></p>
<script>
</script>
</body>
</html>
'프로그래밍 > JavaScript' 카테고리의 다른 글
| JavaScript 분기문 Switch (0) | 2013.01.04 |
|---|---|
| JavaScript 조건문 ( if .. else ) (0) | 2013.01.04 |
| JavaScript 연산자 (0) | 2013.01.04 |
| JavaScript 오브젝트(Object) 설명 (0) | 2013.01.04 |
| 콤마 제거하기 (0) | 2012.05.15 |
| 3자리 콤마 표시하기 (0) | 2012.05.15 |
| 자바스크립트 반올림, 올림, 버림 (2) | 2012.05.09 |
| 백스페이스 키를 막아보기 (0) | 2011.07.13 |