Implémentation du plug-in de sélection de mois basé sur jQuery avec le code source download_jquery

Il s'agit d'un plug-in de sélection de mois basé sur jQuery qui peut sélectionner l'année et le mois. Vous pouvez définir le fait de cliquer sur n'importe quel élément de la page pour déclencher le panneau de sélection contextuel de l'année et du mois. Il peut s'agir d'un lien ou d'un lien. zone de saisie. Il est largement utilisé en mois de requête sans configurer de formulaire de sélection.

Affichage de l'effet Téléchargement du code source 

HTML

Chargez d'abord les fichiers CSS et JS liés au plug-in Monthpicker. Vous pouvez télécharger les fichiers CSS et JS à partir du téléchargement du code source.

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

Ajoutez ensuite le code suivant à l'endroit où vous souhaitez placer l'année et le mois. Il peut s'agir d'une zone de saisie ou d'un lien ou de tout autre élément HTML.

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

jQuery

L'étape suivante est très simple, appelons le plug-in.

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

Comme le montre le code, le paramètre Years est un tableau qui peut définir l'année. Le paramètre topOffset est la distance de décalage entre le panneau qui déclenche le pop-up et l'élément actuel. onMonthSelect est la fonction de rappel après la sélection du mois. Maintenant, exécutez la page Web, cliquez sur le lien ou la zone de saisie, et un panneau de sélection de l'année et du mois apparaîtra. Après la sélection, le panneau disparaît et l'année et le mois sélectionnés seront affichés sur le lien ou dans la zone de saisie. Quant au style du mois dans le panneau contextuel, vous pouvez modifier le CSS dans jquery.monthpicker.css pour obtenir le meilleur effet visuel.