소스 코드 download_jquery를 사용하여 jQuery 기반의 월 선택 플러그인 구현

연도와 월을 선택할 수 있는 jQuery 기반 월 선택 플러그인입니다. 페이지의 요소를 클릭하면 팝업 연도 및 월 선택 패널이 실행되도록 설정할 수 있습니다. 입력 상자. 선택 양식을 설정하지 않고 쿼리하는 데 널리 사용됩니다.

효과 표시 소스 코드 다운로드

HTML

먼저 월별 선택기 플러그인과 관련된 CSS 및 js 파일을 로드합니다. 소스 코드 다운로드에서 CSS 및 js 파일을 다운로드할 수 있습니다.

<link rel="stylesheet" type="text/css" href="jquery.monthpicker.css"> 
<script src="jquery.js"></script> 
<script src="jquery.monthpicker.js"></script> 

그런 다음 연도와 월을 배치하려는 위치에 다음 코드를 추가하세요. 입력 상자나 링크 또는 기타 HTML 요소가 될 수 있습니다.

<a href="#monthpicker" id="monthpicker"></a> 
<input type="text" class="input" id="monthly"> 

jQuery

다음 단계는 매우 간단합니다. 플러그인을 호출해 보겠습니다.

$(function(){ 
$('#monthpicker').monthpicker({ 
years: [2015, 2014, 2013, 2012, 2011], 
topOffset: 6, 
onMonthSelect: function(m, y) { 
console.log('Month: ' + m + ', year: ' + y); 
} 
}); 
$('#monthly').monthpicker({ 
years: [2015, 2014, 2013, 2012, 2011], 
topOffset: 6 
}) 
}); 

코드에서 볼 수 있듯이 year 매개변수는 연도를 설정할 수 있는 배열입니다. topOffset 매개변수는 팝업을 실행하는 패널과 현재 요소 사이의 오프셋 거리입니다. onMonthSelect는 월을 선택한 후 콜백 함수입니다. 이제 웹 페이지를 실행하고 링크나 입력 상자를 클릭하면 연도 및 월 선택 패널이 나타납니다. 선택하면 해당 패널이 사라지고 선택한 연도 및 월이 링크 또는 입력 상자에 표시됩니다. 팝업 패널의 월 스타일은 jquery.monthpicker.css에서 CSS를 수정하여 최상의 시각적 효과를 얻을 수 있습니다.