[제이쿼리] Monthpicker

Datepicker는 다들 많이 써서 잘 알고있겠지만

가끔 Monthpicker를 써야 할 때가 있다. 월만 선택해서 그 달의 매출량을 표시해야 할 때 유용하다.

괜찮은 Monthpicker를 찾음.

 

 

Bootstrap datepicker를 변형한 Monthpicker

https://github.com/wenzhixin/bootstrap-monthpicker

 

중국어로 되어있으므로 js파일을 열어서 수정해줘야함.

var months = [
    '1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'
];

 

이부분은 환경에 맞게 변형시킬 때 쓰는 코드.

//실제 보여지는 날짜 정의
$('#month_text').val(new Date().getFullYear() + '년' + (new Date().getMonth() + 1) + '월');
//monthpicker에서 사용할 초기 날짜 정의
$('#monthpicker').val(new Date().getFullYear() + '-' + (new Date().getMonth() + 1));
//monthpicker 적용
$('#monthpicker').bootstrapMonthpicker({
    autoclose: true,//자동닫힘
    from: '2016-01',//달력 시작 월
 
    //month를 선택한 다음의 이벤트 정의
    onSelect: function(value){
        var workMonthStr = '';
        
        /* monthpicker 라이브러리에서 기본으로 "-"을 사용 */
        var splitDate = $.trim(value).split("-");
        //표현하고 싶으신 포멧으로 알아서 정의하기.
        $.each(splitDate, function (_idx, _date){
            if (_idx == 0)
            workMonthStr += _date + '년';
            if (_idx == 1)
            workMonthStr += _date + '월';
        });
        $("#month_text").val(workMonthStr);
    }
});
$("#month_text").click(function(){
    $("#monthpicker").click();
});
$("#month_icon").click(function(){
    $("#monthpicker").click();
});

 

Jquery-ui datepicker 변형한 Monthpicker

http://junny1909.tistory.com/130

 

monthpicker.zip

 

사이트 관리가 잘 안되는지, 위 블로그의 링크는 안됨.