반응형

이번 포스팅에선 달력 라이브러리를 하나 다뤄볼까 합니다.

 

air - datepicker라는 녀석이고 jqeury가 필요합니다.

아래는 공식 홈페이지입니다. 다양한 예제와 사용법이 정리되어 있습니다.

http://t1m0n.name/air-datepicker/docs/

 

Air Datepicker

Datepicker's language. If string is passed, then language will be searched inDatepicker.languageobject. If object is passed, then data will be taken from this object directly. If some fields are missing, they will be taken from default localization object

t1m0n.name

 

웹 페이지를 구성하다보면 달력은 굉장이 자주 집어넣게 되는 요소인데, jquery ui의 기본 datepicker 아무래도 너무 단순하고 디자인을 잘 모르는 제가 봐도 족히 10년전쯤에 사용했을 것 같은 디자인이라 꺼려지게 되었는데, air-datepicker는 jquery ui datepicker에 비하면 굉장히 깔끔합니다.

 

색상도 많이 들어가지 않아 깔끔하고 어지간한 페이지에 조화로운 느낌이며 옵션 또한 많은 기능을 제공하고 있어서 큰 문제없이 기능을 제어하고 동작시킬 수 있고, 달력 + 시간조합도 가능하기 때문에 일자와 시분초까지 표현해야 하는 경우에도 유용하게 사용할 수 있습니다.

 

사용법을 알아보겠습니다.

 

Air-datepicker

먼저 동작을 위해 js와 css를 다운받아야합니다.

https://github.com/t1m0n/air-datepicker/tree/master/dist

 

t1m0n/air-datepicker

Cool jQuery datepicker. Contribute to t1m0n/air-datepicker development by creating an account on GitHub.

github.com

개발자님의 github로 가셔서 다운로드 받습니다.

 

귀찮으신분들은 아래의 제가올린 압축파일 받습니다.

datepicker.zip
0.07MB

 

단일 달력

<html>

<head>
    <title>datepicker example</title>
    <script src="./jquery-3.1.1.min.js"></script> <!-- 값 제어를 위해 jquery -->
    <link href="./datepicker/css/datepicker.min.css" rel="stylesheet" type="text/css" media="all">
    <!-- Air datepicker css -->
    <script src="./datepicker/js/datepicker.js"></script> <!-- Air datepicker js -->
    <script src="./datepicker/js/datepicker.ko.js"></script> <!-- 달력 한글 추가를 위해 커스텀 -->
</head>

<body>
    <div>
        단일 달력<br />
        <input type="text" id="datepicker">
    </div><br /><br /><br />
</body>
<script>
    $("#datepicker").datepicker({
    	language: 'ko'
    }); 
</script>

</html>

추가한 input text박스를 클릭하면 달력이 생성되고 원하는 날짜를 입력하면 input태그에 날짜가 들어갑니다.

태그안에 속성값을 추가하여 input text박스를 달력으로 사용하거나 스크립트에 요소를 지정해서 사용할 수 있습니다.

 

* 참고로 한국어 언어가 없을 수 있습니다. 저는 datepicker.ko.js 파일을 따로 만들어서 사용중이고, 해당 파일은 위에서 제가 제공하는 파일을 받으시면 됩니다.

 

 

 

단일 달력에 시간 선택하기

$("#datepicker").datepicker({
    language: 'ko',
    timepicker: true,
    timeFormat: "hh:ii AA"
});

아까와 같은 소스에서 이번엔 timepicker 옵션만 true처리 해주면 시간 선택이 가능해집니다.

여기에 추가적으로 시간이 표현될 표현식을 만들어주면 정상적으로 시간 선택까지 할 수 있습니다.

 

 

 

연결된 달력 만들기(날짜 제한처리)

단일 달력의 경우 그냥 일자를 선택하게 해주면 되는데, 시작일 ~ 종료일형태로 되어있는 경우

종료일이 시작일보다 과거로 가거나 시작일이 종료일보다 미래로 선택되는것은 막아야 할텐데, 옵션을 통해 막도록 설정해보겠습니다.

 

datepicker.js

datePickerSet($("#datepicker1"), $("#datepicker2"), true); //다중은 시작하는 달력 먼저, 끝달력 2번째

/*
    * 달력 생성기
    * @param sDate 파라미터만 넣으면 1개짜리 달력 생성
    * @example   datePickerSet($("#datepicker"));
    * 
    * 
    * @param sDate, 
    * @param eDate 2개 넣으면 연결달력 생성되어 서로의 날짜를 넘어가지 않음
    * @example   datePickerSet($("#datepicker1"), $("#datepicker2"));
    */
function datePickerSet(sDate, eDate, flag) {

    //시작 ~ 종료 2개 짜리 달력 datepicker	
    if (!isValidStr(sDate) && !isValidStr(eDate) && sDate.length > 0 && eDate.length > 0) {
        var sDay = sDate.val();
        var eDay = eDate.val();

        if (flag && !isValidStr(sDay) && !isValidStr(eDay)) { //처음 입력 날짜 설정, update...			
            var sdp = sDate.datepicker().data("datepicker");
            sdp.selectDate(new Date(sDay.replace(/-/g, "/")));  //익스에서는 그냥 new Date하면 -을 인식못함 replace필요

            var edp = eDate.datepicker().data("datepicker");
            edp.selectDate(new Date(eDay.replace(/-/g, "/")));  //익스에서는 그냥 new Date하면 -을 인식못함 replace필요
        }

        //시작일자 세팅하기 날짜가 없는경우엔 제한을 걸지 않음
        if (!isValidStr(eDay)) {
            sDate.datepicker({
                maxDate: new Date(eDay.replace(/-/g, "/"))
            });
        }
        sDate.datepicker({
            language: 'ko',
            autoClose: true,
            onSelect: function () {
                datePickerSet(sDate, eDate);
            }
        });

        //종료일자 세팅하기 날짜가 없는경우엔 제한을 걸지 않음
        if (!isValidStr(sDay)) {
            eDate.datepicker({
                minDate: new Date(sDay.replace(/-/g, "/"))
            });
        }
        eDate.datepicker({
            language: 'ko',
            autoClose: true,
            onSelect: function () {
                datePickerSet(sDate, eDate);
            }
        });

        //한개짜리 달력 datepicker
    } else if (!isValidStr(sDate)) {
        var sDay = sDate.val();
        if (flag && !isValidStr(sDay)) { //처음 입력 날짜 설정, update...			
            var sdp = sDate.datepicker().data("datepicker");
            sdp.selectDate(new Date(sDay.replace(/-/g, "/"))); //익스에서는 그냥 new Date하면 -을 인식못함 replace필요
        }

        sDate.datepicker({
            language: 'ko',
            autoClose: true
        });
    }


    function isValidStr(str) {
        if (str == null || str == undefined || str == "")
            return true;
        else
            return false;
    }
}

datePickerSet라는 함수를 따로 만들어서 사용해봤습니다.

 

첫번째 파라미터는 시작일의 달력요소를, 두번째 파라미터에는 종료일의 달력요소를 넣어주면 됩니다.

3번째 파라미터는 처음 로드하면서 처리하는 값인지 아닌지 구분용입니다. true처리하고 로드하시면 됩니다.

시작일과 종료일자에 따라 제한이 걸리는 모습을 볼 수 있습니다.

반응형
저작자표시 비영리 변경금지

'WEB > Javascript' 카테고리의 다른 글

Javascript - 관리자 도구를 활용한 사용된 js 함수 찾기 디버깅  (2) 2020.06.18
Javascript - Calendar 달력 생성하고 제어하기  (4) 2020.06.01
Javascript - 사업자 등록번호 유효성 체크  (0) 2020.05.12
Javascript - 유효성 체크(이메일 정규식, IP 정규식, 비밀번호 등)  (0) 2020.04.20
javascript - vanillaJS로 체크박스(checkbox) 제어하기  (4) 2020.04.10

티스토리툴바