반응형
위에 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일까지 컬럼이 보이도록
그런 소스이다.
무튼 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시키는 소스로 구현해보았다
반응형
'나의 개발 기록 > Javascript' 카테고리의 다른 글
[javascript/JQuery] 동적(append, aftter 등)으로 a태그 생성후 click 이벤트 작동되지 않을 때 (0) | 2023.09.06 |
---|---|
[Javascript] 원하는 위치로 스크롤 이동하기 (0) | 2023.07.18 |
[JavaScript] Ajax를 이용해 얻은 값을 return 보내기 (0) | 2023.01.17 |
댓글