
Affichage du mois et de l'année avec jQuery UI DatePicker
Le composant jQuery UI DatePicker est un outil polyvalent pour afficher des calendriers dans des applications Web. Cependant, il existe des cas où il peut être souhaitable d'afficher uniquement le mois et l'année, en omettant la grille du calendrier. Ceci peut être réalisé grace à une solution de contournement intelligente.
Création d'un affichage ? Mois et année uniquement ?
L'extrait de code suivant fournit une solution?:
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
Ce script configure le sélecteur de date avec des paramètres?:
-
changeMonth et changeYear?: Activer le changement de mois et d'année.
-
showButtonPanel?: Afficher un bouton panneau pour le mois et l'année navigation.
-
dateFormat?: Spécifiez le format souhaité comme "MM aa" pour le mois et l'année uniquement.
-
onClose?: à la fermeture du sélecteur, définir la date sélectionnée sur le premier jour du mois et de l'année sélectionnés.
Masquer le calendrier Grille
Pour masquer la grille du calendrier, ajoutez la règle CSS suivante?:
.ui-datepicker-calendar {
display: none;
}
Exemple HTML complet
Voici une version révisée du fichier HTML avec tous les éléments nécessaires?:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date : < /label>
<input name="startDate">
Cette solution révisée fournit une interface utilisateur qui permet aux utilisateurs de sélectionner un mois et année sans afficher la grille du calendrier.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!