'JavaScript &amp; jQuery' 카테고리의 글 목록 (2 Page)

'JavaScript & jQuery'에 해당되는 글 69건

[jQuery] TextBox에서 다중 선택 기능 제작[jQuery] TextBox에서 다중 선택 기능 제작

Posted at 2020. 7. 24. 07:54 | Posted in JavaScript & jQuery/jQuery

■ 텍스트 입력박스 다중 선택 기능 만들기

jQuery UI 중에는 다중 선택을 위한 Autocomplete - Multiple values 기능이 존재한다.

여러개의 항목중 원하는 몇가지를 선택하는것에 적합한데.

샘플코드( https://jqueryui.com/autocomplete/#multiple ) 를 보면 쉽게 알 수 있을 것이다.

그렇지만 위 샘플코드에서는 선택 입력한 값의 내용이 다시 선택이 가능하다는 단점이 존재하여.

한번 선택한 항목은 선택에서 배제될 수 있게 내용을 조금 수정해 보았다.

# 소스코드

<head>

<title>jQuery UI Autocomplete - 다중 선택</title>

jQuery(document).ready(function() {

jQuery( "#tags" ).on( "keydown" , function( event ) {

// 항목을 선택할때 탭으로 이동하지 못하게 한다.

if( event.keyCode === jQuery.ui.keyCode.TAB && jQuery(this).autocomplete("instance").menu.active ) {

event.preventDefault();

}

}).autocomplete({

minLength : 0

, source : function( request, response ) {

// Autocomplete 자동완성 문자 리스트 - 초기값 ( 변경되지 않는 절대값 )

const availableTags = [

"파이어폭스", "크롬", "오페라", "웨일", "사파리", "익스플로러", "엣지"

, "비발디", "브레이브", "돌핀", "토치", "미도리", "아반트", "맥스톤"

];

// Autocomplete 자동완성 문자 리스트 - 변경값 ( 검색이 이루어지는 실제 배열의 삭제 및 재생산이 이루어짐 )

let unfoldTags = availableTags;

// 콤마( , )로 구분되는 문자열을 배열로 만든다.

let arrTrem = request.term.split(",");

// 문자 리스트에서 이미 선택된 문자열은 삭제한다.

arrTrem.forEach(function(trem) {

let search = unfoldTags.indexOf( trem.trim() );

if(search != -1) {

unfoldTags.splice(search, 1);

}

});

// 자동 완성을 다시 실행하지만, 마지막 용어를 추출한다.

response(jQuery.ui.autocomplete.filter(unfoldTags, extractLast(request.term)));

unfoldTags = null;

}

, focus : function() {

return false;

}

, select : function(event, ui) {

let terms = split(this.value);

// 현재 입력값을 제거한다.

terms.pop();

// 선택된 아이템을 추가한다.

terms.push(ui.item.value);

// 끝에 콤마와 공백을 추가한다.

terms.push("");

this.value = terms.join(", ");

return false;

}

});

// 공백문자에 대응

function split(val) {

return val.split( /,\s*/ );

}

// 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환

function extractLast(term) {

return split(term).pop();

}

});

</script>

</head>

<body>

<label for="tags">프로그래밍 언어 : </label>

</div>

</body>

</html>

# 출력결과

저작자표시

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

[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영 (0)	2020.03.02
[jQuery] JCROP을 이용한 이미지 자르기 - Sample (5)	2020.02.11
[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작 (0)	2019.06.18
[jQuery] 팝업 창 외에 다른 항목 클릭 막기 (0)	2019.06.04
[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기 (7)	2019.01.31

[JavaScript] 자바스크립트를 이용한 캘린더 제작[JavaScript] 자바스크립트를 이용한 캘린더 제작

Posted at 2020. 7. 13. 09:28 | Posted in JavaScript & jQuery/JavaScript

참고 : https://jerryjerryjerry.tistory.com/26

■ 순수 자바스크립트만을 이용한 달력 제작

jQuery등을 통한 캘린더 라이브러리가 많이 존재하지만 뭔가 꼭 있어야 하거나, 구현해야하는 효과가 있는경우

원하는 캘린더 라이브러리를 다시 찾아봐야 하거나, 라이브러리를 마개조 해야하는 상황이 발생하여

순수하게 자바스크립트만을 이용한 달력을 제작하게 되었다.

위 세가지 조건을 만족시키는 캘린더를 제작해 보려고 한다.

# 소스코드

<html>
<head>
<title>:: JavaScript 캘린더 ::</title>
<style type="text/css">
    a { color:#000000;text-decoration:none; }
    .scriptCalendar { text-align:center; }
    .scriptCalendar > thead > tr > td { width:50px;height:50px; }
    .scriptCalendar > thead > tr:first-child > td { font-weight:bold; }
    .scriptCalendar > thead > tr:last-child > td { background-color:#90EE90; }
    .scriptCalendar > tbody > tr > td { width:50px;height:50px; }
</style>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        buildCalendar();
    });

    var today = new Date(); // @param 전역 변수, 오늘 날짜 / 내 컴퓨터 로컬을 기준으로 today에 Date 객체를 넣어줌
    var date = new Date(); // @param 전역 변수, today의 Date를 세어주는 역할

    /**
     * @brief   이전달 버튼 클릭
     */
    function prevCalendar() {
        this.today = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
        buildCalendar();    // @param 전월 캘린더 출력 요청
    }

    /**
     * @brief   다음달 버튼 클릭
     */
    function nextCalendar() {
        this.today = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
        buildCalendar();    // @param 명월 캘린더 출력 요청
    }

    /**
     * @brief   캘린더 오픈
     * @details 날짜 값을 받아 캘린더 폼을 생성하고, 날짜값을 채워넣는다.
     */
    function buildCalendar() {

        let doMonth = new Date(today.getFullYear(), today.getMonth(), 1);
        let lastDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);

        let tbCalendar = document.querySelector(".scriptCalendar > tbody");

        document.getElementById("calYear").innerText = today.getFullYear();                                  // @param YYYY월
        document.getElementById("calMonth").innerText = autoLeftPad((today.getMonth() + 1), 2);   // @param MM월

        // @details 이전 캘린더의 출력결과가 남아있다면, 이전 캘린더를 삭제한다.
        while(tbCalendar.rows.length > 0) {
            tbCalendar.deleteRow(tbCalendar.rows.length - 1);
        }

        // @param 첫번째 개행
        let row = tbCalendar.insertRow();

        // @param 날짜가 표기될 열의 증가값
        let dom = 1;

        // @details 시작일의 요일값( doMonth.getDay() ) + 해당월의 전체일( lastDate.getDate())을 더해준 값에서
        //               7로 나눈값을 올림( Math.ceil() )하고 다시 시작일의 요일값( doMonth.getDay() )을 빼준다.
        let daysLength = (Math.ceil((doMonth.getDay() + lastDate.getDate()) / 7) * 7) - doMonth.getDay();

        // @param 달력 출력
        // @details 시작값은 1일을 직접 지정하고 요일값( doMonth.getDay() )를 빼서 마이너스( - )로 for문을 시작한다.
        for(let day = 1 - doMonth.getDay(); daysLength >= day; day++) {

            let column = row.insertCell();

            // @param 평일( 전월일과 익월일의 데이터 제외 )
            if(Math.sign(day) == 1 && lastDate.getDate() >= day) {

                // @param 평일 날짜 데이터 삽입

                column.innerText = autoLeftPad(day, 2);

                // @param 일요일인 경우
                if(dom % 7 == 1) {
                    column.style.color = "#FF4D4D";
                }

                // @param 토요일인 경우
                if(dom % 7 == 0) {
                    column.style.color = "#4D4DFF";
                    row = tbCalendar.insertRow();   // @param 토요일이 지나면 다시 가로 행을 한줄 추가한다.
                }

            }

            // @param 평일 전월일과 익월일의 데이터 날짜변경
            else {
                let exceptDay = new Date(doMonth.getFullYear(), doMonth.getMonth(), day);
                column.innerText = autoLeftPad(exceptDay.getDate(), 2);
                column.style.color = "#A9A9A9";
            }

            // @brief   전월, 명월 음영처리
            // @details 현재년과 선택 년도가 같은경우
            if(today.getFullYear() == date.getFullYear()) {

                // @details 현재월과 선택월이 같은경우
                if(today.getMonth() == date.getMonth()) {

                    // @details 현재일보다 이전인 경우이면서 현재월에 포함되는 일인경우
                    if(date.getDate() > day && Math.sign(day) == 1) {
                        column.style.backgroundColor = "#E5E5E5";
                    }

                    // @details 현재일보다 이후이면서 현재월에 포함되는 일인경우
                    else if(date.getDate() < day && lastDate.getDate() >= day) {
                        column.style.backgroundColor = "#FFFFFF";
                        column.style.cursor = "pointer";
                        column.onclick = function(){ calendarChoiceDay(this); }
                    }

                    // @details 현재일인 경우
                    else if(date.getDate() == day) {
                        column.style.backgroundColor = "#FFFFE6";
                        column.style.cursor = "pointer";
                        column.onclick = function(){ calendarChoiceDay(this); }
                    }

                // @details 현재월보다 이전인경우
                } else if(today.getMonth() < date.getMonth()) {
                    if(Math.sign(day) == 1 && day <= lastDate.getDate()) {
                        column.style.backgroundColor = "#E5E5E5";
                    }
                }

                // @details 현재월보다 이후인경우
                else {
                    if(Math.sign(day) == 1 && day <= lastDate.getDate()) {
                        column.style.backgroundColor = "#FFFFFF";
                        column.style.cursor = "pointer";
                        column.onclick = function(){ calendarChoiceDay(this); }
                    }
                }
            }

            // @details 선택한년도가 현재년도보다 작은경우
            else if(today.getFullYear() < date.getFullYear()) {
                if(Math.sign(day) == 1 && day <= lastDate.getDate()) {
                    column.style.backgroundColor = "#E5E5E5";
                }
            }

            // @details 선택한년도가 현재년도보다 큰경우
            else {
                if(Math.sign(day) == 1 && day <= lastDate.getDate()) {
                    column.style.backgroundColor = "#FFFFFF";
                    column.style.cursor = "pointer";
                    column.onclick = function(){ calendarChoiceDay(this); }
                }
            }

            dom++;

        }
    }

    /**
     * @brief   날짜 선택
     * @details 사용자가 선택한 날짜에 체크표시를 남긴다.
     */
    function calendarChoiceDay(column) {

        // @param 기존 선택일이 존재하는 경우 기존 선택일의 표시형식을 초기화 한다.
        if(document.getElementsByClassName("choiceDay")[0]) {
            document.getElementsByClassName("choiceDay")[0].style.backgroundColor = "#FFFFFF";
            document.getElementsByClassName("choiceDay")[0].classList.remove("choiceDay");
        }

        // @param 선택일 체크 표시
        column.style.backgroundColor = "#FF9999";

        // @param 선택일 클래스명 변경
        column.classList.add("choiceDay");
    }

    /**
     * @brief   숫자 두자릿수( 00 ) 변경
     * @details 자릿수가 한자리인 ( 1, 2, 3등 )의 값을 10, 11, 12등과 같은 두자리수 형식으로 맞추기위해 0을 붙인다.
     * @param   num     앞에 0을 붙일 숫자 값
     * @param   digit   글자의 자릿수를 지정 ( 2자릿수인 경우 00, 3자릿수인 경우 000 … )
     */
    function autoLeftPad(num, digit) {
        if(String(num).length < digit) {
            num = new Array(digit - String(num).length + 1).join("0") + num;
        }
        return num;
    }

</script>
</head>
<body>
<table class="scriptCalendar">
    <thead>
        <tr>
            <td onClick="prevCalendar();" style="cursor:pointer;"><<</td>
            <td colspan="5">
                <span id="calYear">YYYY</span>년
                <span id="calMonth">MM</span>월
            </td>
            <td onClick="nextCalendar();" style="cursor:pointer;">>></td>
        </tr>
        <tr>
            <td>일</td><td>월</td><td>화</td><td>수</td><td>목</td><td>금</td><td>토</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>
</body>
</html>

위 코드를 실행해 보면 결과가 아래와 같음을 확인 해 볼 수 있다.

# 출력결과

저작자표시

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

[JavaScript] (0)	2020.09.09
[JavaScript] 자바스크립트로 HWP 파일 제어 (0)	2020.09.07
[JavaScript] SelectBox를 사용하는 날짜 검색창 제작 (0)	2020.07.12
[JavaScript] 매월의 월요일 기준, 주차 구하기 (4)	2020.06.29
[JavaScript] Table을 Excel 처럼 즉시 수정가능하게 만들기 (1)	2020.06.24

[JavaScript] SelectBox를 사용하는 날짜 검색창 제작[JavaScript] SelectBox를 사용하는 날짜 검색창 제작

Posted at 2020. 7. 12. 20:31 | Posted in JavaScript & jQuery/JavaScript

■ 셀렉트 박스를 이용한 캘린더 제작

위와 같이 <SELECT> 태그를 통해 날짜값을 지정하여 검색하는 페이지를 제작하게 되었다.

jQuery UI의 DatePicker등을 사용하면 그냥 손쉽게 해결 할 수 있고,

보통은 다 이렇게 하지만, 또 막상 일을 하다보면 위와 같은 검색을 선호하는 클라이언트가 또 있을 수 있다라는 생각이들어

추가적으로 실제 업무에서 많이 쓰이게 되는 GET 방식을 통한 검색조건 전달의 경우를 포함하여

내용을 정리해보았다.

※ 예외 처리해야할 사항들

① 매월의 마지막 날의 날짜는 항상 일치하지 않기에, 그달의 마지막 날보다 큰 날짜는 자동적으로 선택할 수 없어야 한다.

② 처음 접속시 해당월의 첫째날( 01일 )과 마지막날( 28일, 29,일 30일, 31일 등 )이 자동 세팅되어야 한다.

③ GET방식을 통해 검색 시작일과 종료일의 날짜 데이터가 전달되는 경우의 수를 처리해야 한다.

④ 사용자가 날짜를 선택하는 과정에서 31일이 선택되어 있는 가운데 31일이 존재하지 않는 년, 월을 선택한 경우

해당 월의 마지막 날로 자동 변경시켜주어야 한다.

위 경우를 상정하여 아래 코드를 작성하게 되었다.

# 소스코드

<html>

<head>

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

document.addEventListener("DOMContentLoaded", function() {

const stdDays = document.querySelector("span:nth-child(1)"); // @param 시작일 영역지정

const endDays = document.querySelector("span:nth-child(2)"); // @param 종료일 영역지정

let stdFirstDate = null; // @param 시작일의 첫날

let endFirstDate = null; // @param 종료일의 첫날

let stdLastDate = null; // @param 시작일의 전체일수

let endLastDate = null; // @param 종료일의 전체일수

// @param GET방식으로 전달된 시작일, 종료일의 지정값이 존재하지 않는경우 ( ※ 맨처음 시작시에 실행 )

if(nullPointerException(getParameter("stdDate")) == false && nullPointerException(getParameter("endDate")) == false) {

const toDate = new Date();

stdFirstDate = new Date(toDate.getFullYear(), (toDate.getMonth() + 1));

stdLastDate = new Date(stdFirstDate.getFullYear(), (stdFirstDate.getMonth() + 1), 1); // @param 다음달의 첫째날을 지정

stdLastDate.setDate(0); // @param 다음달에서 하루를 빼서 원하는 월의 마지막 날로 맞춤

endFirstDate = new Date(toDate.getFullYear(), (toDate.getMonth() + 1));

endLastDate = new Date(endFirstDate.getFullYear(), (endFirstDate.getMonth() + 1), 1); // @param 다음달의 첫째날을 지정

endLastDate.setDate(0); // @param 다음달에서 하루를 빼서 원하는 월의 마지막 날로 맞춤

}

// @param GET방식으로 전달된 시작일, 종료일의 지정값이 존재하는 경우

else {

const stdDate = getParameter("stdDate");

stdFirstDate = new Date(

Number(stdDate.substring(0, 4))

, Number(stdDate.substring(6, 8))

, Number(stdDate.substring(4, 6))

);

stdLastDate = new Date(stdFirstDate.getFullYear(), stdFirstDate.getMonth(), 1); // @param 다음달의 첫째날을 지정

stdLastDate.setDate(0); // @param 다음달에서 하루를 빼서 원하는 월의 마지막 날로 맞춤

const endDate = getParameter("endDate");

endFirstDate = new Date(

Number(endDate.substring(0, 4))

, Number(endDate.substring(4, 6))

, Number(endDate.substring(6, 8))

);

endLastDate = new Date(endFirstDate.getFullYear(), endFirstDate.getMonth(), 1); // @param 다음달의 첫째날을 지정

endLastDate.setDate(0); // @param 다음달에서 하루를 빼서 원하는 월의 마지막 날로 맞춤

}

// @param 년도( Year ) - 선택

for(let year = 0; stdDays.querySelector("select:nth-child(1)").length > year; year++) {

if(stdDays.querySelector("select:nth-child(1)").options[year].value == stdFirstDate.getFullYear()) {

stdDays.querySelector("select:nth-child(1)").options[year].selected = true;

}

if(endDays.querySelector("select:nth-child(1)").options[year].value == stdFirstDate.getFullYear()) {

endDays.querySelector("select:nth-child(1)").options[year].selected = true;

}

// @param 월( Month ) - 선택

for(let month = 0; stdDays.querySelector("select:nth-child(2)").length > month; month++) {

if(stdDays.querySelector("select:nth-child(2)").options[month].value == stdFirstDate.getMonth()) {

stdDays.querySelector("select:nth-child(2)").options[month].selected = true;

}

if(endDays.querySelector("select:nth-child(2)").options[month].value == endFirstDate.getMonth()) {

endDays.querySelector("select:nth-child(2)").options[month].selected = true;

}

// @param 일( Day ) - 생성 및 선택

// @details - 날짜는 매월 마지막일이 다르게 끝나기 때문에 직접 생성하고,

// 선택한 날( 기본값 시작일 - 01일, 종료일은 - 말일 )을 자동으로 selected 한다.

for(let date = 1; stdLastDate.getDate() >= date; date++) {

if(stdFirstDate.getDate() == date) {

stdDays.querySelector("select:nth-child(3)").innerHTML

+= "<option value='" + date + "' selected>" + autoLeftPad(date, 2) + "</option>";

} else {

stdDays.querySelector("select:nth-child(3)").innerHTML

+= "<option value='" + date + "'>" + autoLeftPad(date, 2) + "</option>";

}

for(let date = 1; endLastDate.getDate() >= date; date++) {

if((nullPointerException(getParameter("endDate")) == true) ? endFirstDate.getDate() : endLastDate.getDate() == date) {

endDays.querySelector("select:nth-child(3)").innerHTML

+= "<option value='" + date + "' selected>" + autoLeftPad(date, 2) + "</option>";

} else {

endDays.querySelector("select:nth-child(3)").innerHTML

+= "<option value='" + date + "'>" + autoLeftPad(date, 2) + "</option>";

}

});

/**

* @brief 시작일( 년, 월 ), 종료일 ( 년, 월 )의 값이 변경된 경우 실행

* @details 시작일( 년, 월 ), 종료일 ( 년, 월 )의 값이 변경에 따른 해당 년월의 전체일수를 다시 체크,

* 변경된 년월의 일보다 선택된 일이 큰경우 마지막 날로 선택일 자동 변경

function changeConditionPeriod(cal) {

const searchDays = cal.parentNode;

const checkDate = searchDays.querySelector("select:nth-child(3)").value;

// @param 다음달의 첫째날을 지정

let lastDate = new Date(

searchDays.querySelector("select:nth-child(1)").value

, searchDays.querySelector("select:nth-child(2)").value

, 1

);

lastDate.setDate(0); // @param 하루를 뺌

// @param 일정보 초기화

searchDays.querySelector("select:nth-child(3)").innerHTML = "";

// @param 일정보 재삽입

for(let date = 1; lastDate.getDate() >= date; date++) {

if(checkDate == date) {

searchDays.querySelector("select:nth-child(3)").innerHTML

+= "<option value='" + date + "' selected>" + autoLeftPad(date, 2) + "</option>";

} else {

searchDays.querySelector("select:nth-child(3)").innerHTML

+= "<option value='" + date + "'>" + autoLeftPad(date, 2) + "</option>";

}

// @param 일정보 예외처리 선택되어있는 마지막 날이 바꾼 월의 날보다 큰경우의 예외처리

if(checkDate > lastDate.getDate()) {

searchDays.querySelector("select:nth-child(3) > option:last-child").selected = true;

}

/**

* @brief 강제로 앞에 0을 붙여서 두자릿수 숫자로 변경한다.

* @param num 앞에 0을 붙일 숫자 값

* @param digit 자릿수를 지정

function autoLeftPad(num, digit) {

if(String(num).length < digit) { num = new Array(digit - String(num).length + 1).join("0") + num; }

return num;

}

/**

* @brief GET으로 넘어오는 값의 존재 여부를 체크

function nullPointerException(worth) {

if(

worth == ""

|| worth == null

|| worth == undefined

|| (worth != null && typeof worth == "object" && !Object.keys(worth).length == "")

) {

return false;

} else {

return true;

}

/**

* @brief GET방식으로 전달된 값을 추출

* @param param 추출할 key의 명칭

var getParameter = function(param) {

let returnValue;

let url = location.href;

let parameters = (url.slice(url.indexOf("?") + 1, url.length)).split("&");

for(let i = 0; i < parameters.length; i++) {

let varName = parameters[i].split("=")[0];

if (varName.toUpperCase() == param.toUpperCase()) {

returnValue = parameters[i].split("=")[1];

return decodeURIComponent(returnValue);

}

};

</script>

</head>

<body>

<h1>■ SelectBox를 이용한 캘린더</h1>

<hr/>

<div>

<span>

시작일 : 

</select>

 년  

</select>

 월  

 일

</span>

<span>

종료일 : 

</select>

 년  

</select>

 월  

 일

</span>

</div>

</body>

</html>

이제 위 코드를 브라우저를 통해 실행시켜 보면

# 출력결과

위와 같이 예외처리해야할 사항들이 정상적으로 반영되어 기능하는 모습을 확인 할 수 있다.

저작자표시

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

[JavaScript] 자바스크립트로 HWP 파일 제어 (0)	2020.09.07
[JavaScript] 자바스크립트를 이용한 캘린더 제작 (13)	2020.07.13
[JavaScript] 매월의 월요일 기준, 주차 구하기 (4)	2020.06.29
[JavaScript] Table을 Excel 처럼 즉시 수정가능하게 만들기 (1)	2020.06.24
[JavaScript] 정규 표현식 사용방법 (0)	2020.05.07

[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>

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

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

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>

 년  

</select>

 월  

</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

Prev Next

1 2 3 4 5 ··· 18

'JavaScript & jQuery'에 해당되는 글 69건

[jQuery] TextBox에서 다중 선택 기능 제작[jQuery] TextBox에서 다중 선택 기능 제작

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

[JavaScript] 자바스크립트를 이용한 캘린더 제작[JavaScript] 자바스크립트를 이용한 캘린더 제작

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

[JavaScript] SelectBox를 사용하는 날짜 검색창 제작[JavaScript] SelectBox를 사용하는 날짜 검색창 제작

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

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

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

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바