본문 바로가기
  • 평범한 나의 개발공부 일지
나의 개발 기록/Javascript

[Javascript] 윤달 계산하기

by 블랑 블랑 2022. 9. 1.
반응형

* bootstrap table

위에 select box에서 검색하고자 하는 연도를 선택하고 2월을 선택했을때 테이블 컬럼이 유동적으로 해당연도의 2월에 맞는 일수가 나오도록 하고싶다.

 

2월 제외한 나머지 달은 일수가 정해져있기 때문에

$("#monthChange").on("change", function() {
	if( $(this).val() == '1' || $(this).val() == '3' || $(this).val() == '5' || $(this).val() == '7' || $(this).val() == '8' || $(this).val() == '10' || $(this).val() == '12' ){
    		$('#table').bootstrapTable('showColumn', '30_DAY');
    		$('#table').bootstrapTable('showColumn', '31_DAY');
    		$('.dateInput').hide();
    	}else if(  $(this).val() == '2' ){
    		$('#table').bootstrapTable('hideColumn', '30_DAY');
    		$('#table').bootstrapTable('hideColumn', '31_DAY');
    		$('.dateInput').hide();
    	}else{
    		$('#table').bootstrapTable('hideColumn', '31_DAY');
    		$('#table').bootstrapTable('showColumn', '30_DAY');
    		$('.dateInput').hide();
    	}
});

이런식으로 월 select box에 change이벤트를 줘서

  • 1,3,5,7,8,10,12월은 31일까지 컬럼이 보이도록
  • 2월은 29일까지 컬럼이 보이도록
  • 나머지는 30일까지 컬럼이 보이도록 

그런 소스이다.

 

change 될때마다 컬럼이 잘 생겼다가 없어졌다가 하는 모습

 

무튼 2월이 문제이다. 연도에 따라서 2월은 일수가 달라진다

이거를 javascript로 구현해보려고 한다!

 

 

	else if(  $(this).val() == '2' ){
    		twoDay = new Date($('#yearChange').val(),2,0).getDate()
    		console.log(twoDay);
    		if( twoDay == 28){
    			$('#table').bootstrapTable('hideColumn', '29_DAY');
    		}
    		$('#table').bootstrapTable('hideColumn', '30_DAY');
    		$('#table').bootstrapTable('hideColumn', '31_DAY');
    		$('.dateInput').hide();
    	}

 

이렇게 new Date를 이용해서 해당연도의 2월의 일수를 구한다음 28일때의 조건에만 29일을 hide시키는 소스로 구현해보았다

 

잘 된다!

 

 

 

 

 

 

 

 

 

 

 

 

 

반응형

댓글