jQuery 의 년월 달력 year month, 년월일 year month day 달력 샘플 소스

년월 달력은 아래 jquery.mtz.monthpicker 를 사용했습니다.

github.com/lucianocosta/jquery.mtz.monthpicker

lucianocosta/jquery.mtz.monthpicker

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

github.com

년월일 달력은 jQuery UI - v1.11.1 을 사용했습니다.

jqueryui.com/download/all/

All jQuery UI Downloads | jQuery UI

All jQuery UI Downloads link 1.12.0-rc.2 link 1.12.0-rc.1 link 1.12.0-beta.1 link 1.11.0-beta.2 link 1.11.0-beta.1 link 1.10.0 RC 1 link 1.10.0 Beta 1 link 1.9.0 RC 1 link 1.9.0 Beta 1 link 1.9.0 Milestone 8 - Position link 1.9.0 Milestone 7 - Accordion li

jqueryui.com

대학내일_년월달력_년월일달력_소스샘플_jQuery.zip

0.14MB

년월 샘플

년월일 샘플

소스 내용

<html>
<head><title>대학내일</title>
	<link href="./css/jquery-ui.css" rel="stylesheet" type="text/css">
	<style>
		#monthpicker {
			width: 60px;
		}
	</style>
</head>

<body>
	년월 <input id="monthpicker" type="text" /><br>
	년월일 <input id="ymdpicker" type="text" class="input-date" />
	
	<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="./js/jquery.mtz.monthpicker.js"></script>
	<script>

	 $(function () {
		/* MonthPicker 옵션 */
		options = {
			pattern: 'yyyymm', // Default is 'mm/yyyy' and separator char is not mandatory
			selectedYear: 2014,
			startYear: 2008,
			finalYear: 2018,
			monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']
		};
		
		/* MonthPicker Set */
		$('#monthpicker').monthpicker(options);	

		//모든 datepicker에 대한 공통 옵션 설정
		$.datepicker.setDefaults({
			dateFormat: 'yymmdd' //Input Display Format 변경
			, showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
			, showMonthAfterYear: true //년도 먼저 나오고, 뒤에 월 표시
			, changeYear: true //콤보박스에서 년 선택 가능
			, changeMonth: true //콤보박스에서 월 선택 가능
			//,showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시
			//,buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로
			//,buttonImageOnly: true //기본 버튼의 회색 부분을 없애고, 이미지만 보이게 함
			//,buttonText: "선택" //버튼에 마우스 갖다 댔을 때 표시되는 텍스트
			, yearSuffix: "년" //달력의 년도 부분 뒤에 붙는 텍스트
			, monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] //달력의 월 부분 텍스트
			, monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'] //달력의 월 부분 Tooltip 텍스트
			, dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'] //달력의 요일 부분 텍스트
			, dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'] //달력의 요일 부분 Tooltip 텍스트
			//,minDate: "-1M" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
			//,maxDate: "+1M" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)
		});

		$(".input-date").datepicker();


	 });
		
	</script>
</body>
</html>

나중에 알아보기

아래 kidsysco.github.io/ 에서 만든 년월 달력이 더 좋은 거 같네요.

kidsysco.github.io/jquery-ui-month-picker/

jQuery UI Month Picker Plugin

About The jQuery UI Month Picker Plugin is designed to allow user input for only a month and year when only that input is required. Clicking on the year, allows the user to jump ahead or back 12 years at a time. Clicking anywhere on the page, except on the

kidsysco.github.io

저작자표시 비영리 동일조건

'프로그래밍 > jQuery 👍' 카테고리의 다른 글

jQuery.qrcode 를 활용한 qr code 생성하기 (1)	2021.09.14
javascript 이메일 정규식 생성하기 email regex validation (7)	2021.03.11
javascript - ie 10 이하 브라우저 경고창 띄우기 (0)	2020.12.23
jQuery textarea 글자 수 세기 (공백포함, 공백제외) (0)	2020.12.11
Vanilla JavaScript 에서 패턴 잠금 – PatternLockJS (1)	2020.11.27

재우니의 블로그

jQuery 의 년월 달력 year month, 년월일 year month day 달력 샘플 소스