Implementierung eines Monatsauswahl-Plug-Ins basierend auf jQuery mit Quellcode download_jquery

Dies ist ein jQuery-basiertes Monatsauswahl-Plug-in, das das Jahr und den Monat auswählen kann. Sie können festlegen, dass durch Klicken auf ein beliebiges Element auf der Seite das Popup-Fenster zur Auswahl von Jahr und Monat ausgelöst wird Eingabefeld. Es wird häufig in Monaten verwendet, ohne ein Auswahlformular einzurichten.

Effektanzeige Quellcode-Download 

HTML

Laden Sie zunächst die CSS- und JS-Dateien für das Monthpicker-Plugin. Sie können die CSS- und JS-Dateien über den Quellcode-Download herunterladen.

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

Fügen Sie dann den folgenden Code an der Stelle hinzu, an der Sie das Jahr und den Monat platzieren möchten. Dabei kann es sich um ein Eingabefeld, einen Link oder ein anderes HTML-Element handeln.

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

jQuery

Der nächste Schritt ist ganz einfach: Rufen wir das Plug-in auf.

$(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 
}) 
}); 

Wie aus dem Code hervorgeht, ist der Parameter years ein Array, mit dem das Jahr festgelegt werden kann. Der Parameter topOffset ist der Versatzabstand zwischen dem Panel, das das Popup auslöst, und dem aktuellen Element. onMonthSelect ist die Rückruffunktion nach Auswahl des Monats. Starten Sie nun die Webseite, klicken Sie auf den Link oder das Eingabefeld, und ein Auswahlfeld für Jahr und Monat wird angezeigt. Nach der Auswahl verschwindet das Bedienfeld und das ausgewählte Jahr und der ausgewählte Monat werden auf dem Link oder im Eingabefeld angezeigt. Was den Monatsstil im Popup-Fenster betrifft, können Sie das CSS in jquery.monthpicker.css ändern, um den besten visuellen Effekt zu erzielen.