[Jquery] 현재날짜와 다음달날짜 구하는방법 (feat.포맷변경/체크박스)

안녕하세요. 오늘은 제이쿼리에서 날짜포맷을 변경하여 원하는태그에 값을 넣어주는 방법에 대해 알아보겠습니다.

저는 특정한 체크박스를 누르면 제이쿼리에서 계산한 날짜가 들어갈 수 있도록 하였습니다.

 

---

여기서 만료예정 버튼을 누르면

 

사진과 같이 제가 계산한 날짜와 포맷에 맞추어 값이 들어갑니다.

저는 현재일과 다음달 날짜를 계산하였고 포맷도 yyyy-mm-dd 형태로 설정하였습니다.

 

---

 

HTML

 

디자인과 상관없이 코드분석만 하기 때문에 쓸때없는 코드는 다 빼고 핵심적인 부분만 넣겠습니다.

 

처음 input칸의 id값인 searchCoSdate,

두번째 input칸의 id값인 searchCoEdate,

세번째 checkbox칸의 id값 expiry와 value="Y", 그리고 함수 dateFigure();가 포인트입니다.

 

<div class="form-group m-l-10">
	<label class="control-label" for="">계약기간</label>
	<div> 
		<input type="text" id="searchCoSdate"/> 
	</div> ~
	<div> 
		<input type="text" id="searchCoEdate" /> 
	</div>
	<span>
		<input type="checkbox" id="expiry" value="Y" onclick="dateFigure();"/>
		<label>만료예정</label>
	</span>
</div>

 

JQEURY

 

우선은 yyyy-mm-dd 포맷형태를 만들기위해 포맷함수를 만듭니다. (getFormatDate)

그리고 dateFigure함수에서 계산을 진행합니다.

 

코드분석을 하자면,

check에서는 checkbox의 id값인 expiry가 체크라면 true, 아니면 false 값이 들어갈 수 있도록 합니다.

그리고 now변수에 date를 선언해줍니다.

 

fstDate 에는 현재 년월일을 불러오고

lastDate 에는 월에 +1을하여 다음달 일자를 불러옵니다.

 

그리고 날짜포맷함수인 getFormatDate에 fstDate와 lastDate를 넣으면

yyyy-mm-dd 형태가 되겠죠!!

 

그리고 if문을 사용하여 만약에 체크가 true라면 날짜 input의 id값에 각각 값을 넣어주고,

false라면 날짜 input의 id값에 각각 빈값을 넣어주면 끝입니다!!

 

function getFormatDate(date){
      var year = date.getFullYear();
      var month = (1 + date.getMonth());
      month = month >= 10 ? month : '0' + month;
      var day = date.getDate();
      day = day >= 10 ? day : '0' + day;
      return year + '-' + month + '-' + day;
  }


function dateFigure(){
	
	var check = $('#expiry').is(":checked");
	var now = new Date();
	
	var fstDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
	var lastDate = new Date(now.getFullYear(), now.getMonth()+1, now.getDate());

	fstDate = getFormatDate(fstDate);
	lastDate = getFormatDate(lastDate);
	
	if(check){
		
		$("#searchCoSdate").val(fstDate);
		$("#searchCoEdate").val(lastDate);
		
	}else{
		
		$("#searchCoSdate").val("");
		$("#searchCoEdate").val("");
		
	}
}

 

 

추가로 날짜를 더하고 빼는 방법입니다.

 

저는 데이터에 하루를 더하는방법을 getDate를 이용하여 하였습니다.

응용해서 getFullYear / getMonth를 사용하면 되겠죠!!

 

function Create(edate){
		
	var date = new Date(edate);
	
	date.setDate(date.getDate()+1);
	var xdate = getFormatDate(date);
		
	$("#sdate").val(xdate);
	
}