[JavaScript] 매월의 월요일 기준, 주차 구하기[JavaScript] 매월의 월요일 기준, 주차 구하기

Posted at 2020. 6. 29. 18:14 | Posted in JavaScript & jQuery/JavaScript
반응형




참고 : https://blog.naver.com/z1004man/220936098651

참고 : https://matthew-jo.tistory.com/8





■ 매월 월요일을 기준으로하는 주차 및 해당주차의 날짜 구하기


( 부제 : 일요일을 마지막으로 하는 주차 구하기 )




※ 선택한 매월의 월요일을 기준으로하는 해당월의 주차수와 각 주차별 월요일, 일요일 날짜를 구하는 함수




통계 프로그램을 만들면서 JSP, PHP, Oracle, MySQL등 여러가지 개발 언어를 사용하여


매월의 주차를 구하는 프로그램을 구현해야 하는 일이 종종 발생 하였다.


그런데 저렇게 다양한 환경에서 매번 그 언어에 맞게 다시 조립 및 분해하는 과정이 생기는게 싫어서.


이번에 아예 한번 자바스크립트로 클라이언트 영역에서 넘겨줄 값을 미리 다 생성해서 넘겨주면


좀더 환경에 자유로울 수 있을 것 같아 순수 자바스크립트로 매월의 ( 월요일을 시작을 기준 )으로 함수를 만들어 정리해 보았다.





# 소스코드

<html>

<head>

<title>:: JavaScript 매월 주차 구하기 ::</title>

<script type="text/javascript">


    // 기준요일에 따른 주차구하는 함수.

    // 해당 주차 / 해당주차 시작날짜 / 해당주차 끝나는날짜를 리턴.

    function searchPeriodCalculation() {


        let cYear = document.getElementById("choiceYear").value;

        let cMonth = document.getElementById("choiceMonth").value.replace(/(^0+)/, "") - 1;


        // 날짜형으로 데이트 포맷

        let date = new Date(cYear, cMonth);


        // 월요일을 중심으로한 주차 구하기( JS기준 : 일요일 0 월요일 1 ~ 토요일 6 )

        let firstDay = new Date(date.getFullYear(), date.getMonth(), 1);

        let lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);


        let weekObj = null;

        let weekObjArray = new Array();

        let weekStand = 8;  // 월요일 고정

        let firstWeekEndDate = true;

        let thisMonthFirstWeek = firstDay.getDay();


        for(var num = 1; num <= 6; num++) {


            // 마지막월과 첫번째월이 다른경우 빠져나온다.

            if(lastDay.getMonth() != firstDay.getMonth()) {

                break;

            }


            weekObj = new Object();


            // 한주의 시작일은 월의 첫번째 월요일로 설정

            if(firstDay.getDay() <= 1) {


                // 한주의 시작일이 일요일이라면 날짜값을 하루 더해준다.

                if(firstDay.getDay() == 0) { firstDay.setDate(firstDay.getDate() + 1); }


                weekObj.weekStartDate =

                      firstDay.getFullYear().toString()

                    + "-"

                    + numberPad((firstDay.getMonth() + 1).toString(), 2)

                    + "-"

                    + numberPad(firstDay.getDate().toString() , 2);

            }


            if(weekStand > thisMonthFirstWeek) {

                if(firstWeekEndDate) {

                    if((weekStand - firstDay.getDay()) == 1) {

                        firstDay.setDate(firstDay.getDate() + (weekStand - firstDay.getDay()) - 1);

                    }

                    if((weekStand - firstDay.getDay()) > 1) {

                        firstDay.setDate(firstDay.getDate() + (weekStand - firstDay.getDay()) - 1)

                    }

                    firstWeekEndDate = false;

                } else {

                    firstDay.setDate(firstDay.getDate() + 6);

                }

            } else {

                firstDay.setDate(firstDay.getDate() + (6 - firstDay.getDay()) + weekStand);

            }


            // 월요일로 지정한 데이터가 존재하는 경우에만 마지막 일의 데이터를 담는다.

            if(typeof weekObj.weekStartDate !== "undefined") {


                weekObj.weekEndDate =

                      firstDay.getFullYear().toString()

                    + "-"

                    + numberPad((firstDay.getMonth() + 1).toString(), 2)

                    + "-"

                    + numberPad(firstDay.getDate().toString(), 2);

                    

                weekObjArray.push(weekObj);

            }


            firstDay.setDate(firstDay.getDate() + 1);

        }


        console.log( weekObjArray );

    }


    // 월, 일 날짜값 두자리( 00 )로 변경

    function numberPad(num, width) {

        num = String(num);

        return num.length >= width ? num : new Array(width - num.length + 1).join("0") + num;

    }

</script>

</head>

<body>

    <div>

        <input type="text" id="choiceYear" style="text-align:center;" value="2020"/>

        &nbsp;년&nbsp;&nbsp;

        <select id="choiceMonth">

            <option value="01">01</option>

            <option value="02">02</option>

            <option value="03">03</option>

            <option value="04">04</option>

            <option value="05">05</option>

            <option value="06">06</option>

            <option value="07">07</option>

            <option value="08">08</option>

            <option value="09">09</option>

            <option value="10">10</option>

            <option value="11">11</option>

            <option value="12">12</option>

        </select>

        &nbsp;월&nbsp;&nbsp;

        <button type="button" onClick="searchPeriodCalculation( );">검색</button>

    </div>

</body>

</html>




위 코드의 결과는 아래와 같다.



# 출력 결과















반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트를 이용한 캘린더 제작  (13) 2020.07.13
[JavaScript] SelectBox를 사용하는 날짜 검색창 제작  (0) 2020.07.12
[JavaScript] Table을 Excel 처럼 즉시 수정가능하게 만들기  (1) 2020.06.24
[JavaScript] 정규 표현식 사용방법  (0) 2020.05.07
[JavaScript] 휴대폰 사진 업로드시 회전 방지  (0) 2020.03.30
//

티스토리툴바