보통사람

[jQuery] monthPicker 사용법 본문

정리

[jQuery] monthPicker 사용법

pej4303 2019. 12. 15. 20:21

프로젝트를 진행하다 보면 연도와 월만 선택해야 하는 경우가 있습니다.

jQuery UI 플러그인에 datepicker 라는 것을 이용해서 할 수도 있지만 이번 프로젝트를 진행하면 알게 된 monthpicker에 대해 소개해보려 합니다.

 

  • jQuery UI  : 1.11.4

  • monthpicker : jquery.mtz.monthpicker.js

1. jquery.mtz.monthpicker.js 다운로드 합니다.

   

   -.  URL : https://github.com/lucianocosta/jquery.mtz.monthpicker

 

   [ Clone or download] 버튼을 누른 후 zip 파일로 다운로드합니다.

 

 

lucianocosta/jquery.mtz.monthpicker

Monthpicker, the missing JQuery widget. Contribute to lucianocosta/jquery.mtz.monthpicker development by creating an account on GitHub.

github.com

 

2. 다운로드한 js 프로젝트에 추가합니다.

 

<!-- jquery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- // jquery UI -->
<script src="/front/js/jquery.mtz.monthpicker.js"></script><!-- monthPicker js -->

 

3. monthpicker 사용 방법

 

사용법은 datepicker와 매우 비슷하고 간단합니다.

방법 1처럼 option을 따로 지정해서 넣어줄 수 도 있고 방법 2처럼 태그에 속성을 지정해서 할 수도 있습니다.

연도만 지정할 거라면 방법 2처럼 하는 게 더 편리할 것 같습니다.

 

$(document).ready(function(){
    var options = {
        pattern: 'yyyy-mm'       // input태그에 표시될 형식
       ,selectedYear: 2019       // 선택할 연도
       ,startYear: 2010          // 시작연도
       ,finalYear: 2022          // 마지막연도
       // ,monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
       ,monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']         // 화면에 보여줄 월이름
       ,openOnFocus: true       // focus시에 달력이 보일지 유무
       ,disableMonths : [ ]     // 월 비활성화
    };

    // 방법1) options 따로 지정
    $("#monthPicker").monthpicker(options);

    // 방법2) input 태그에서 연도 지정
    $("#monthPicker2").monthpicker();
    
    $('#btn_monthPicker').bind('click', function () {
        $('#monthPicker2').monthpicker('show');
    });
});
<table>
    <colgroup>
        <col style="width: 30%" />
        <col />
    </colgroup>
    <tr>
        <th>monthPicker</th>
        <td><input type="text" id="monthPicker" name="monthPicker" style="" /></td>
    </tr>
    <tr>
        <th>monthPicker with button</th>
        <td>
            <input type="text" id="monthPicker2" name="monthPicker2" style=""  data-start-year="2016" data-final-year="2020" data-selected-year="2019"/>
            <input type="button" id="btn_monthPicker" name="btn_monthPicker" value="클릭" />
        </td>
    </tr>
</table>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>monthPicker</title>
<!-- jquery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- // jquery UI -->
<script src="/front/js/jquery.mtz.monthpicker.js"></script><!-- monthPicker js -->
<script>
$(document).ready(function(){
    var options = {
        pattern: 'yyyy-mm'       // input태그에 표시될 형식
       ,selectedYear: 2019       // 선택할 연도
       ,startYear: 2010          // 시작연도
       ,finalYear: 2022          // 마지막연도
       // ,monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
       ,monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']         // 화면에 보여줄 월이름
       ,openOnFocus: true       // focus시에 달력이 보일지 유무
       ,disableMonths : [ ]     // 월 비활성화
    };

    // 방법1) options 따로 지정
    $("#monthPicker").monthpicker(options);

    // 방법2) input 태그에서 연도 지정
    $("#monthPicker2").monthpicker();
    
    $('#btn_monthPicker').bind('click', function () {
        $('#monthPicker2').monthpicker('show');
    });
});
</script>
</head>
<body>
    <table>
        <colgroup>
            <col style="width: 30%" />
            <col />
        </colgroup>
        <tr>
            <th>monthPicker</th>
            <td><input type="text" id="monthPicker" name="monthPicker" style="" /></td>
        </tr>
        <tr>
            <th>monthPicker with button</th>
            <td>
                <input type="text" id="monthPicker2" name="monthPicker2" style=""  data-start-year="2016" data-final-year="2020" data-selected-year="2019"/>
                <input type="button" id="btn_monthPicker" name="btn_monthPicker" value="클릭" />
            </td>
        </tr>
    </table>
</body>
</html>

 

4. 마무리

 

개인적으로 datepicker보다 디자인이 더 괜찮지만 option에 대해 자세하게 나와있는 사이트가 별로 없습니다. 

아래의 링크가 그나마 잘 되어있는데 내용이 빈약해 보입니다.

참고하시면 좋을 것 같습니다.

 

-. URL : http://lucianocosta.com.br/jquery.mtz.monthpicker/

 

저작자표시 변경금지

'정리' 카테고리의 다른 글

[VMware] VMware 설치(Workstation Player 15.5)  (0) 2020.04.15
[Eclipse] 이클립스에서 Class Decompiler 이용해서 class 파일 보기  (0) 2020.04.15
[JavaScript] 날짜 포맷 지정  (0) 2019.10.11
[SQL] MyBaits 문자열 비교  (0) 2019.10.03
[SQL] 주민번호 마스킹 처리  (0) 2019.09.29
'정리' Related Articles more