Bootstrap 용 bootstrap-monthpicker 예제!

Bootstrap 용 Monthpicker

지난번에 제가 jQuery 를 이용한 monthpicker 를 소개했었습니다.

jQuery.mtz.monthpicker 포스팅 바로가기 

날짜가 아닌 달(월)만 선택 하는 경우도 많이 있잖아요? 

그래서 이번에는 bootstrap 에서 사용 가능한 monthpicker 를 하나 소개하겠습니다.

GitHub 사이트 주소입니다.

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

들어가보시면 아시겠지만 중국분이 만드신 것 같습니다.

샘플도 보시면 한자로 나오죠?ㅎㅎ

예제 설명 시작할께요.

먼저 파일을 다운받아보시면 파일이 여러개 있지만 저희가 필요한 것은 2개예요.

bootstrap-monthpicker.css

bootstrap-monthpicker,js

bootstrap 아래에 다 첨부해주세요.

파일만 넣으시라는 의미가 아니고 <link> 태그, <script> 태그에 다 포함하라는 말입니다.^^

그리고 가장 먼저 해야 하는 작업은 한자로 되어있는 달(월) 글자를 바꿔줘야 합니다.

bootstrap-monthpicker.js 파일을 열어주세요.

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

위와 같이 원하시는 글자로 수정해주세요.

그리고 HTML 소스 입니다.

		

			

				

					2014년 10월
					
				
				
			
		

하나하나 설명을 안하셔도 아시겠죠?

굳이 설명을 하자면 ID 가 "monthpicker" 인 input 태그는 실제 액션이 일어나지만 숨겨놓았어요.

왜냐면...monthpicker 라이브러리를 굳이 손대고 싶지 않았기 때문이죠^^

그냥 그건 그대로 두고 제 소스를 손대는게 훨씬 편하기 때문이죠.

다음 javascript 소스 입니다.

$(function () {
	// 실제로 보여지는 날짜를 정의.
	$('#txt-work-month').text(new Date().getFullYear() + '년 ' + (new Date().getMonth() + 1) + '월');
	// monthpicker 에서 사용할 초기 날짜 정의
	$('#monthpicker').val(new Date().getFullYear() + '-' + (new Date().getMonth() + 1));
	
	// monthpicker 적용
	$('#monthpicker').bootstrapMonthpicker({
		// from: '2014-05',
		// to: '2014-10',
		// 달을 선택한 다음의 이벤트 정의 
		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 + '월';
			});
			
			// 표시
			$('#txt-work-month').text(workMonthStr);
		}
	});
	// #choice-work-month 에 monthpicker 이벤트 정의
	$('#choice-work-month').click(function () {
		$('#monthpicker').click();
	});
});

실행한 모습!

빨간색네모 안을 클릭하시면 달력이 보였다 사라졌다 해요.

이상 Bootstrap Monthpicker 예제 였습니다.