자바스크립트 날짜 계산

자바스크립트로 날짜 계산할 경우가 많습니다. 요즘이야 뭐 달력들이 워낙 잘 나와서 그 수고를 덜긴 하는데.. 그래도 코딩으로 계산해야 하는 경우가 종종 있죠.

얼마전에 그 작업을 하다 짜증이 나서 확 만들었습니다만;;;;; 대충 만든거라 참고만 하시구요.

응용해서 사용하세요. 먼저 미리보기부터 보시고 아래쪽에 소스코드를 올리겠습니다.

미리보기

아래는 소스

<!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>

Comment List

  1. 김선환 2014.07.30 14:01
    으어어어~~~~~찾고잇던건데
    너무 감사합니다.
    잘쓸께요!!!!!!
  2. 박경민 2018.03.21 17:58
    도움 되는 글이에요 감사합니다~!

Write Comment