Kendo DatePicker 시작일 종료일 제한하기 (두가지 방법)

 

 

1. 날짜는 모두 선택 가능, 검색 버튼에서 검사하는 방법

 

 

 

모든 날짜를 선택할 수 있는 대신 검색 버튼을 누르면 alert창이 뜨고 시작과 종료일을 같은 날짜로 set해준다.

 

        //시작일과 종료일 체크한 후 이상 없으면 true반환
        chkDatePicker : function () {
            var stDe = $("#stDe").data("kendoDatePicker").value();
            var edDe = $("#edDe").data("kendoDatePicker").value();
            if(stDe > edDe){
                console.log("no");
                return false;
            }
            return true;
        },

        //이상 있을 시 시작일과 종료일 같은 날짜로 셋팅
        setStEdDatePicker : function (){
            $('#edDe').kendoDatePicker('value', new Date($("#stDe").val()));
        }

 

    $("#searchBtn").on("click", function(){
        if($los.ui.chkDatePicker()){
          	/*해당 날짜 정보 갖고 오는 function*/
        }
        else{
            alert("시작일과 종료일을 확인해주세요.");
            $los.ui.setStEdDatePicker();
        }
    });

 

검색버튼 클릭시 일어나는 이벤트이다.

chkDatePicker에서 true를 받을 시에만 정보를 갖고와 보여준다.

false일 때는 alert창을 띄우고 종료일을 시작날짜로 셋팅한다.

 

 

 

 

---

 

 

 

2. 아예 날짜 막아놓는 방법

위와 같이 선택할 수 없는 날짜는 아예 보여지지 않는다.

setDatePicker : function () {
            $('#stDe').kendoDatePicker({
                format: 'yyyy-MM-dd',
                change: onStDeChange,
            });

            $('#edDe').kendoDatePicker({
                format: 'yyyy-MM-dd',
                change: onEdDeChange,
            });
            $('#stDe').kendoDatePicker('value', new Date('2017-05-03'));
            $('#edDe').kendoDatePicker('value', new Date('2017-05-04'));
            $('#stDe').kendoDatePicker('max', '2017-05-03');
            $('#edDe').kendoDatePicker('min', '2017-05-04');

            function onStDeChange(){
                console.log("change2");

                // 같은 날 허용
                // $("#edDe").kendoDatePicker('min', $("#stDe").val());

                // 하루 차이 나도록 제한
                $("#edDe").kendoDatePicker('min', moment(kendo.date.addDays($("#stDe").data("kendoDatePicker").value(), 1)).format("YYYY-MM-DD"));
            }
            function onEdDeChange(){
                console.log("change2");

                // 같은 날 허용
                // $("#stDe").kendoDatePicker('max', $("#edDe").val());

                // 하루 차이 나도록 제한
                $("#stDe").kendoDatePicker('max', moment(kendo.date.addDays($("#edDe").data("kendoDatePicker").value(), -1)).format("YYYY-MM-DD"));
            }


        }

kendoPicker를 사용하여 처음부터 종료일의 minDate와 시작일의 maxDate를 설정해준다.

각각의 change이벤트를 설정해주고 날짜가 바뀔 시 minDate와 maxDate를 변경해준다.

이 경우에는 아예 날짜를 선택할 수 없게 되어있어 달력에 선택할 수 없는 날짜가 보여지지 않는다.

단점은 시작일을 좀 더 이후 날짜로 바꾸려면 먼저 종료일을 넉넉하게 선택하여 시작일의 maxDate를 변경해야 

시작일을 변경할 수 있다.