Material Design DatePicker 사용하기 (날짜 선택기)

Material Design DatePicker 사용하기 (날짜 선택기)

최근 웹개발의 편의를 위해 웹디자인 관련 프레임워크(Framework)가 많이 출시 되었는데요, 그 중에 구글(Google) 에서 즐겨 쓰는 매테리얼 디자인(Material Design)을 이용하여 날짜선택기(Datepicker)를 사용하는 방법을 알려드리겠습니다.

[공식 홈페이지 : https://getmdl.io]

공식홈페이지 명세를 찾아보면 날짜선택기(Date Picker)은 없는데요, 구글링을 통해 정보를 찾았습니다.

좌표는 https://github.com/UgoSansH/mdl-datepicker 이곳입니다. 완벽한 일반 웹개발용이 아닌 노드서버(NodeJS) 전용으로 나와있는데, 약간의 코어소스 수정으로 일반 웹에서도 사용 할 수 있습니다. 이거 찾아서 사용하려고 거의 2시간정도 삽질 한것 같습니다 ㅜㅜ

예제 소스는 위의 링크인 깃허브(Github)에서 받으실 수 있습니다.

추가로 수정해야할 파일들이 있습니다.

• calendar.min.js
• datepicker.min.js

수정해야할 파일은 위의 2개 파일 입니다.  min버전의 파일이라 한줄로 되어 있는데, http://jsbeautifier.org/ 여기를 이용하면 가독성이 좋게 자동으로 변환되어 볼 수 있습니다.

function(window) {
        "use strict";
        "undefined" == typeof window.epepite && (window.epepite = {}), "undefined" == typeof epepite.DatePicker && (epepite.DatePicker = {}), "undefined" == typeof epepite.DatePicker.TEMPLATES && (epepite.DatePicker.TEMPLATES = {}), epepite.DatePicker.TEMPLATES["default"] = '<div class="mdl-calendar__header"><div class="mdl-calendar__header-year"><button type="button" name="mdl-calendar-year-prev" class="%YEAR_PREV_CLASS% %IS_VISIBLE% mdl-calendar__year--button left mdl-calendar__button"><i class="icon material-icons"><</i></button><p class="%YEAR_CLASS%">2016</p><button type="button" name="mdl-calendar-year-next" class="%YEAR_NEXT_CLASS% %IS_VISIBLE% mdl-calendar__year--button right mdl-calendar__button"><i class="icon material-icons">></i></button></div><p class="mdl-calendar__header-fulldate %TEXT_DATE_CLASS%">Mercredi 16 Mars</p></div><div class="mdl-calendar__body"><div class="mdl-calendar__body-month"><button type="button" name="mdl-calendar__month--prev" class="%MONTH_PREV_CLASS% %IS_VISIBLE% mdl-calendar__button"><i class="icon material-icons"><</i></button><p class="mdl-calendar__body-month-title"><span class="%MONTH_CLASS%">Mars</span> <span class="%YEAR_CLASS%">2016</span></p><button type="button" name="mdl-calenda__month--next" class="%MONTH_NEXT_CLASS% %IS_VISIBLE% mdl-calendar__button"><i class="icon material-icons">></i></button></div><div class="%WEEK_LABELS_CLASS%"><div class="%WEEK_CLASS% %WEEK_LABELS_CLASS%"><span class="%WEEK_ITEM_CLASS% %WEEK_LABEL_CLASS%">월</span><span class="%WEEK_ITEM_CLASS% %WEEK_LABEL_CLASS%">화</span><span class="%WEEK_ITEM_CLASS% %WEEK_LABEL_CLASS%">수</span><span class="%WEEK_ITEM_CLASS% %WEEK_LABEL_CLASS%">목</span><span class="%WEEK_ITEM_CLASS% %WEEK_LABEL_CLASS%">금</span><span class="%WEEK_ITEM_CLASS% %WEEK_LABEL_CLASS%">토</span><span class="%WEEK_ITEM_CLASS% %WEEK_LABEL_CLASS%">일</span></div></div><div class="%DAY_CONTAINER_CLASS%"></div></div></div>'
    }(window),
    function(window) {
        "use strict";
        "undefined" == typeof window.epepite && (window.epepite = {}), "undefined" == typeof epepite.DatePicker && (epepite.DatePicker = {}), "undefined" == typeof epepite.DatePicker.TEMPLATES && (epepite.DatePicker.TEMPLATES = {}), epepite.DatePicker.TEMPLATES.material = '<div class="mdl-calendar__header"><div class="mdl-calendar__header-year"><button type="button" name="mdl-calendar-year-prev" class="%YEAR_PREV_CLASS% %IS_VISIBLE% mdl-calendar__year--button left mdl-calendar__button"><i class="icon material-icons">keyboard_arrow_left</i></button><p class="%YEAR_CLASS%">2016</p><button type="button" name="mdl-calendar-year-next" class="%YEAR_NEXT_CLASS% %IS_VISIBLE% mdl-calendar__year--button right mdl-calendar__button"><i class="icon material-icons">keyboard_arrow_right</i></button></div><p class="mdl-calendar__header-fulldate %TEXT_DATE_CLASS%">Mercredi 16 Mars</p></div><div class="mdl-calendar__body"><div class="mdl-calendar__body-month"><button type="button" name="mdl-calendar__month--prev" class="%MONTH_PREV_CLASS% %IS_VISIBLE% mdl-calendar__button"><i class="icon material-icons">keyboard_arrow_left</i></button><p class="mdl-calendar__body-month-title"><span class="%MONTH_CLASS%">Mars</span> <span class="%YEAR_CLASS%">2016</span></p><button type="button" name="mdl-calenda__month--next" class="%MONTH_NEXT_CLASS% %IS_VISIBLE% mdl-calendar__button"><i class="icon material-icons">keyboard_arrow_right</i></button></div><div class="%WEEK_LABELS_CLASS%"><div class="%WEEK_CLASS% %WEEK_LABELS_CLASS%"><span class="%WEEK_ITEM_CLASS% %WEEK_LABEL_CLASS%">월</span><span class="%WEEK_ITEM_CLASS% %WEEK_LABEL_CLASS%">화</span><span class="%WEEK_ITEM_CLASS% %WEEK_LABEL_CLASS%">수</span><span class="%WEEK_ITEM_CLASS% %WEEK_LABEL_CLASS%">목</span><span class="%WEEK_ITEM_CLASS% %WEEK_LABEL_CLASS%">금</span><span class="%WEEK_ITEM_CLASS% %WEEK_LABEL_CLASS%">토</span><span class="%WEEK_ITEM_CLASS% %WEEK_LABEL_CLASS%">일</span></div></div><div class="%DAY_CONTAINER_CLASS%"></div></div></div>'
    }(window)

먼저 calendar.min.js 파일을 보겠습니다. 위에 보이는 부분 인데, [월, 화, 수, 목, 금, 토, 일] 각각의 하나의 문구가 중간중간에 들어가있습니다. 적절하게 검색하여 해당되는 부분을 수정하시기 바랍니다.

epepite.DatePicker.DatePicker.prototype.setDate = function(date)
    {
        this.input.value = moment(date).format(this.config.format);
        this.calendar.setDate(date);
        freshReset();
 
        return this;
    };

다음은 datepicker.min.js 입니다. 해당되는 함수부분에 freshReset(); 라는 함수를 실행하도록 추가 해뒀습니다.

function freshReset()
    {
        var input1 = $('#s_date')[0].value;
        var input2 = $('#e_date')[0].value;
        if(input1)
        {
            $('#s_date').attr({
                'placeholder':'',
                'value':input1
            });
            $('#s_date').next().html('');
        }
 
        if(input2)
        {
            $('#e_date').attr({
                'placeholder':'',
                'value':input2
            });
            $('#e_date').next().html('');
        }
    }

freshReset 함수의 내용 입니다. 이렇게 함수를 사용하지 않으면 datepicker 가 사용될 input박스에 실제로 value에 값이 들어가지 않아 placeholder의 내용이 그대로 유지되는 버그가 있습니다. 위의 함수는 나중에 본문에서 한번 더 언급 하도록 하겠습니다.

마지막으로 예제 소스 입니다. 그대로 메모장으로 옮겨서 index.html 로 저장하여 실행해 보세요

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-indigo.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link rel="stylesheet" type="text/css" href="http://lottodr.co.kr/js/datepicker.min.css" />
<script src="http://code.jquery.com/jquery-2.2.4.js" ></script>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/locale/ko.js"></script>
<script src="http://lottodr.co.kr/js/datepicker.min.js"></script>
<script type="text/javascript" src="http://lottodr.co.kr/js/calendar.min.js"></script>
 
<div class="mdl-textfield mdl-js-textfield mdl-cell--5-col">
  <input class="mdl-textfield__input datepicker1" type="text" id="s_date" />
  <label class="mdl-textfield__label" for="s_date">시작일</label>
</div>
 
<script type="text/javascript">
    window.addEventListener('load', function() {
        var datepicker1 = new epepite.DatePicker.DatePicker({
            'input' : '.datepicker1',
            'format' : 'YYYY-MM-DD'
        });        
    });
 
    epepite.DatePicker.Translations.ko = {
        'close' : '닫기',
        'day'   : '일',
        'month' : '월',
        'header': {
            'year_next' : '다음',
            'year_prev' : '이전 %year%'
        },
        'days' : ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'],
        'months': ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']
    }
 
    function freshReset()
    {
        var input1 = $('#s_date')[0].value;        
        if(input1)
        {
            $('#s_date').attr({
                'placeholder':'',
                'value':input1
            });
            $('#s_date').next().html('');
        }
    }
</script>

궁금하신 내용은 댓글로 남겨주세요~