基於jQuery實作選取月份外掛附源碼下載_jquery

這是一個基於jQuery的可以選擇年份和月份的月份拾取插件，你可以設定點擊頁面上的任意元素觸發彈出年月選擇面板，可以是一個連結也可以是一個輸入框，廣泛應用於月份查詢，而無需設定select表單。

效果顯示        源碼下載  

HTML

先將monthpicker外掛相關的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 
}) 
}); 

程式碼中可以看出，參數years是一個數組，可以設定年份，參數topOffset就是觸發彈出的面板與目前元素的偏移距離。 onMonthSelect是選擇月份後的回呼函數。現在運行網頁，點擊連結或輸入框，會彈出一個年月選擇面板，選擇好後，面板消失，並在連結上或輸入框內顯示所選的年月。至於彈出面板中的月份樣式可以修改jquery.monthpicker.css中的css來獲得最佳視覺效果。