반응형

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

 

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처리하고 로드하시면 됩니다.

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

반응형
  1. bang 2021.07.15 11:13

    안녕하세요 글 잘 봤습니다ㅠ 올려주신 코드 사용해서 달력 사용하고 있는데요 혹시 mindate 지정은 안되나요?ㅠ 저기 속성에서 추가 하니까 적용이 안돼서요
    오늘 날짜 이후로만 선택이 가능하게하려고 하는데 minDate가 안먹네요ㅠㅠ

    • Favicon of https://myhappyman.tistory.com Park.S.W 2021.07.15 17:07 신고

      안녕하세요! 방문해주셔서 감사합니다😊

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

      공식홈페이지에 보시면 기능별 예시와 사용 예제가 잘 나와있어서 도움이 되실 것 같습니다.

      아래는 오늘 날짜 이후 예제입니다.
      -----------------------------------------
      $('#달력 id값').datepicker({
      language: 'en',
      minDate: new Date()
      })

    • Favicon of https://wdbang.tistory.com dev_bang 2021.07.15 23:59 신고

      헐 검색해봤을때 minDate:0 이라고 해서 넣었는데 안돼서 여쭤봤는데 newDate 넣으니까 돼요ㅠㅠㅠ감사함니다ㅠㅠㅠㅠㅠㅠ

    • Favicon of https://myhappyman.tistory.com Park.S.W 2021.07.16 17:46 신고

      해결되어서 다행이네요😁

  2. 지나가다가 2021.07.21 14:48

    안녕하세요! 써주신 글 보면서 연습하는 중입니다~
    따라하는 중에 한가지 문제가 생겼습니다.
    dateForamt을 yy-mm-dd로 수정하면 시작날짜 선택은 가능한데, 종료날짜를 선택할수 없게 되네요.. ㅠㅠ
    이 오류에 대해서는 어떤 부분을 보면 좋을지 답변 주시면 정말 감사하겠습니다..

    • Favicon of https://myhappyman.tistory.com Park.S.W 2021.07.21 15:22 신고

      안녕하세요 공유해드린 소스를 그대로 사용하신 경우 아마 시작일자 기준 종료일자 처리, 종료일자 기준 시작일자 처리 하는 if문 부분에서 오류가 났을것으로 판단됩니다.

      해당부분에서 날짜 문자열 형태를 그대로 new Date() 메소드에 넣으면서 "Invalid Date" 오류가 났을것으로 판단이 되는데, 재 파싱해주는 구문으로 설정하셔야 할것같네요.

      "/" 구분자를 기준으로 년 월 일을 쪼개서 new Date에 제대로 넣도록 변경하시면 해결 될겁니다.😅