코드 해석 좀 부탁드립니다 선배님들 ㅜ ㅜ (datepicker)

코드 해석 좀 부탁드립니다 선배님들 ㅜ ㅜ (datepicker)

QA

코드 해석 좀 부탁드립니다 선배님들 ㅜ ㅜ (datepicker)

본문

안녕하세요 코딩 입문자입니다 !

 

 

지금 datepicker로 달력을 구현하려고하는데요....

 

코드를 긁어와서 붙여넣기하니 작동은 되는데..

 

초보이다보니 전체적인 코드 이해가 되질 않네요 ㅜㅜ

 

조금 수정을 해서 적용을 시키려고하는데

혹시 아래의 코드를 해석해주실 선배님 계실까요 ?

 

 

 

<div class="wrap">
    <div><input type="text" id="from"></div>
    <div><input type="text" id="to"></div>
</div>

<button class="btn">조회</button>


<script>
    var rangeDate = 31; // set limit day
    var setSdate, setEdate;
    $("#from").datepicker({
        dateFormat: 'yy-mm-dd',
        minDate: 0,
        onSelect: function (selectDate) {
            var stxt = selectDate.split("-");
            stxt[1] = stxt[1] - 1;
            var sdate = new Date(stxt[0], stxt[1], stxt[2]);
            var edate = new Date(stxt[0], stxt[1], stxt[2]);
            edate.setDate(sdate.getDate() + rangeDate);

            $('#to').datepicker('option', {
                minDate: selectDate,
                beforeShow: function () {
                    $("#to").datepicker("option", "maxDate", edate);
                    setSdate = selectDate;
                    console.log(setSdate)
                }
            });
//to 설정
        }
//from 선택되었을 때
    });

    $("#to").datepicker({
        dateFormat: 'yy-mm-dd',
        onSelect: function (selectDate) {
            setEdate = selectDate;
            console.log(setEdate)
        }
    });
    $('.btn').on('click', function (e) {
        if ($('input#from').val() == '') {
            alert('시작일을 선택해주세요.');
            $('input#from').focus();
            return false;
        } else if ($('input#to').val() == '') {
            alert('종료일을 선택해주세요.');
            $('input#to').focus();
            return false;
        }

        var t1 = $('input#from').val().split("-");
        var t2 = $('input#to').val().split("-");
        var t1date = new Date(t1[0], t1[1], t1[2]);
        var t2date = new Date(t2[0], t2[1], t2[2]);
        var diff = t2date - t1date;
        var currDay = 24 * 60 * 60 * 1000;
        if (parseInt(diff / currDay) > rangeDate) {
            alert('로그 조회 기간은 ' + rangeDate + '일을 초과할 수 없습니다.');
            return false;
        }

        alert("성공")
    });
    //조회 버튼 클릭
</script>

 

<style>
    div.wrap > div{
        font-size: 12px;
        position: relative;
        float: left;
        margin-right: 5px;
        height: 30px;
        line-height: 30px;
        vertical-align: middle;
    input{
        line-height: 30px;
        margin: 0;
        padding: 0;
        padding-left: 5px;
        padding-right: 5px;
        width: 100px;
    }
    }
    button{
        clear: both;
        display: block;
        line-height: 40px;
        margin-top: 80px;
        background-color: #eee;
        color: #333;
        border: 1px solid #666;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 4px;
    }
</style>

 

 

 

 

감사합니다 !

이 질문에 댓글 쓰기 :

답변 1

구글에서 datepicker 옵션 이라고 검색을 하시면

여러 블로그 게시글이나 기타 옵션에 대한 설명글이 정리되어있는 것은 확인 할 수 있습니다.

한줄한줄 설명드릴 분이 없을 것 같아 답변남깁니다.

특히 입문자라면 전체적인 흐름을 보고 이해하는데에 시간이 오래 걸립니다.

단순 datepicker 스크립트를 사용하고 거기에 추가 옵션들을

구글링하여 추가해보거나 빼보거나 하면서 해당 스크립트 구조를 파악하시는게

가장 빠릅니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 109
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT