[JavaScript] 날짜 형식에 하이픈(-)기호 자동 삽입[JavaScript] 날짜 형식에 하이픈(-)기호 자동 삽입

Posted at 2020. 9. 10. 18:20 | Posted in JavaScript & jQuery/JavaScript
반응형





■ 날짜 입력 형식에 하이픈(-)기호 자동 삽입





# 소스코드

<html>

<head>

<title>:: JavaScript 날짜 하이픈(-) 삽입 ::</title>

<script type="text/javascript">

    function inputYMDNumber(obj) {


        // @see DELETE 키버튼이 눌리지 않은 경우에만 실행

        if(event.keyCode != 8) {


            // @see 숫자와 하이픈(-)기호의 값만 존재하는 경우 실행

            if(obj.value.replace(/[0-9 \-]/g, "").length == 0) {


                // @see 하이픈(-)기호를 제거한다.

                let numberobj.value.replace(/[^0-9]/g,"");

                let ymd = "";


                // @see 문자열의 길이에 따라 Year, Month, Day 앞에 하이픈(-)기호를 삽입한다.

                if(number.length < 4) {

                    return number;

                } else if(number.length < 6){

                    ymd += number.substr(0, 4);

                    ymd += "-";

                    ymd += number.substr(4);

                } else {

                    ymd += number.substr(0, 4);

                    ymd += "-";

                    ymd += number.substr(4, 2);

                    ymd += "-";

                    ymd += number.substr(6);

                }


                // @see 입력 가능 날짜 제한 기능 - 선택

                // if(ymd.length == 10) {

                //

                //     const birthDay = new Date(number.substr(0,4)+"/"+number.substr(4,2)+"/"+number.substr(6)+" 00:00:00");

                //     const limitDay = new Date("2000/10/04 23:59:59");

                //

                //     if(birthDay > limitDay) {

                //         alert("2000년 10월 04일 이후의 날짜는\n선택할 수 없습니다.");

                //         obj.value = "";

                //         obj.focus();

                //         return false;

                //     }

                // }


                obj.value = ymd;


            } else {

                alert("숫자 이외의 값은 입력하실 수 없습니다.");


                //@see 숫자와 하이픈(-)기호 이외의 모든 값은 삭제한다.

                obj.value = obj.value.replace(/[^0-9 ^\-]/g,"");

                return false;

            }

        } else {

            return false;

        }

    }

</script>

</head>

<body>

    <h1>■ 날짜 자동 하이픈(-)기호 삽입</h1>

    <input type="text" onKeyup="inputYMDNumber(this);" value="" placeholder="YYYY-MM-DD" style="text-align:center;"/>

</body>

</html>





# 출력결과







반응형
//

[JavaScript] 입력 텍스트값 Byte 체크[JavaScript] 입력 텍스트값 Byte 체크

Posted at 2020. 9. 10. 15:43 | Posted in JavaScript & jQuery/JavaScript
반응형

 

 

 

참고 : https://zzznara2.tistory.com/458

 

 

 

 

 

 

■ 입력 텍스트 값 자동으로 Byte체크하기

 

 

 

 

다국어 페이지 제작에 따른 입력 텍스트의 글자( Byte단위 )의 체크가 필요했다.

 

텍스트 박스에 글자를 입력하다가 해당 텍스트가 정해진 Byte의 단위를 넘어서는 경우가 발생하면

 

자동으로 더 이상의 텍스트 삽입을 막는 예이다.

 

 

# 소스코드

<html>
<head>
<title>:: JavaScript Byte 체크하기 ::</title>
<style type="text/css">
    .contents { width : 99%;height : 100px; }
    .viewByte { font-weight : bold;color : red; }
</style>
<script type="text/javascript">


    // @see     설정된 바이트의 크기를 넘어서지 못하게 체크하는 함수
    function inputLimitByteChecked( obj ) {


        var calByte = {
            getByteLength : function( string ) {


                if( string == null || string.length == 0 ) {
                    return 0;
                }


                let size = 0;


                for( let num = 0; num < string.length; num++ ) {
                    size += this.charByteSize( string.charAt( num ) );
                }


                return size;
            }
            , cutByteLength : function( string, length ) {


                if( string == null || string.length == 0 ) {
                    return 0;
                }


                let size = 0;
                let rIndex = string.length;


                for( let num = 0; num < string.length; num++ ) {


                    size += this.charByteSize( string.charAt( num ) );


                    if( size == length ) {
                        rIndex = num + 1;
                        break;
                    } else if( size > length ) {
                        rIndex = num;
                        break;
                    }
                }


                return string.substring( 0, rIndex );
            }
            , charByteSize : function( ch ) {
                if( ch == null || ch.length == 0 ) {
                    return 0;
                }


                let charCode = ch.charCodeAt( 0 );


                if( charCode <= 0x00007F ) {
                    return 1;
                } else if( charCode <= 0x0007FF ) {
                    return 2;
                } else if( charCode <= 0x00FFFF ) {
                    return 3;
                } else {
                    return 4;
                }
            }
        };


        if( calByte.getByteLength( obj.value ) > obj.dataset.byte ) {
            alert("작성할 수 있는 텍스트 글자 범위를 초과하였습니다.");
            obj.value = calByte.cutByteLength( obj.value, obj.dataset.byte );
        } else {
            document.getElementsByClassName( "viewByte" )[0].innerText = calByte.getByteLength( obj.value );
        }
    }
</script>
</head>
<body>
    <h1>■ 입력 텍스트의 자동 Byte 체크</h1>
    <textarea class="contents" onKeyup="inputLimitByteChecked( this );" data-byte="255"></textarea>
    <p><span class="viewByte">0</span>&nbsp;Byte 입니다.</p>
</body>
</html>

 

 

 

이제 해당 코드의 출력결과를 살펴보자.

 

텍스트 박스에 글자를 계속 입력해 나가면 data-byte 에 설정된 255 값이 넘으면 경고창이 나타날 것이다.

 

 

 

# 출력결과

 

 

 

경고창을 닫으면 255 값이 넘어선 텍스트는 자동으로 삭제가 이루어진다.

 

 

 

 

 

반응형
//

[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 ) 를 보면 쉽게 알 수 있을 것이다.


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


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




# 소스코드

<html lang="ko">

<head>

<meta charset="utf-8">

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

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>

<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script type="text/javascript">

    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>

<div class="ui-widget">

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

    <input id="tags" size="80" value="">

</div>

</body>

</html>






# 출력결과











반응형
//

[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;">&#60;&#60;</td>
            <td colspan="5">
                <span id="calYear">YYYY</span>년
                <span id="calMonth">MM</span>월
            </td>
            <td onClick="nextCalendar();" style="cursor:pointer;">&#62;&#62;</td>
        </tr>
        <tr>
            <td>일</td><td>월</td><td>화</td><td>수</td><td>목</td><td>금</td><td>토</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>
</body>
</html>

 

 

 

 

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

 

 

 

 
# 출력결과
반응형
//