2023. 6. 26. 20:09
javascript에서 현재/이전/다음 분기 기간 구하기 개발/html, js, jQuery, Bootstrap2023. 6. 26. 20:09
반응형
날짜의 분기(Quarter)를 구해서 자동으로 달력 input에 매핑해 주면
실 사용자들이 편리하겠다라는 생각이 들어서 바로 작업을 진행하였다.
분기의 규칙만 알면 간단하게 진행할 수 있었는데 수학적으로 표현하자면
1/1 ~ 3/31은 1분기,
4/1 ~ 6/30은 2분기,
7/1 ~ 9/30은 3분기,
10/1 ~ 12/31은 4분기 이므로 분기 시작 월을 구하려면 다음과 같은 규칙을 꺼낼 수 있었다.
현재 분기 = 현재 월/3의 소수점 1번째 자리 올림
분기 시작 월 = (현재 분기 - 1)* 3 + 1
하지만 javascript에서 월은 0~11로 표현되므로 아래 소스코드의 수식으로 변환되었다.
(분기도 0~3으로 표현되도록 함)
var quarter = parseInt(date.getMonth() / 3);
var startMonth = quarter * 3;
분기 끝 날짜를 구하려면 시작일에 2개월을 더하고 해당 월의 마지막 날짜를 구한다.
var endDate = getMonthLastDate(new Date(addMonths(new Date(startDate), 2)));
이전/다음 분기는 분기마다 3개월 씩 차이나므로 현재 날짜의 월에 3씩 이동해서 구하면 된다.
(단, 3월 31일에 3개월을 더할 경우 6월 31일이 되는데 이는 존재하지 않는 날짜로 js에서 7월 1일으로 자동 변환된다.
때문에 날짜를 1일로 셋팅하고 구해야 일(day)에 따른 버그가 생기지 않는다.)
var date = addMonths((new Date(now.setDate(1))), count*3);
그렇게 완성된 소스코드는 다음과 같다.
<script type="text/javascript">
function getQuarterStartDate(date) {
var year = date.getFullYear();
var quarter = parseInt(date.getMonth() / 3);
var startMonth = quarter * 3;
return (new Date(year, startMonth, 2)).toISOString().substring(0, 10);
}
function getMonthLastDate(date) {
return (new Date(date.getFullYear(), date.getMonth()+1, 1)).toISOString().substring(0, 10);
}
function addMonths(orgDate, count) {
return (new Date(orgDate.setMonth(orgDate.getMonth() + count))).toISOString().substring(0, 10);
}
function setDate(startId, endId, count) {
var now = new Date();
var date = addMonths((new Date(now.setDate(1))), count*3);
var startDate = getQuarterStartDate(new Date(date));
var endDate = getMonthLastDate(new Date(addMonths(new Date(startDate), 2)));
$("#"+startId).val(startDate);
$("#"+endId).val(endDate);
}
var quarterCnt = 0;
function moveQuarter(count) {
quarterCnt += count;
setDate("startDate", "endDate", quarterCnt);
}
$(function() {
setDate("startDate", "endDate", quarterCnt);
});
</script>
<html>
<body>
<button type="button" onClick="moveQuarter(-1)">◀</button>
<input type="text" id="startDate" name="startDate" readonly/>
<input type="text" id="endDate" name="endDate" readonly/>
<button type="button" onClick="moveQuarter(1)">▶</button>
</body>
</html>
반응형
'개발 > html, js, jQuery, Bootstrap' 카테고리의 다른 글
| Bootstrap Tooltips, 테이블에서 이상하게 보일 때 해결법 (0) | 2022.05.27 |
|---|---|
| jQuery를 이용하여 Table Scroll 이동해도 항상 header 보는 법(고정) (0) | 2020.03.27 |
