코드 해석 좀 부탁드립니다 선배님들 ㅜ ㅜ (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개

채택된 답변
+20 포인트

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

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

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

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

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

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

가장 빠릅니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고