Comment puis-je afficher uniquement le mois et l'année dans un DatePicker de jQuery UI ?

Affichage uniquement du mois et de l'année dans jQuery UI DatePicker

jQuery UI DatePicker est un outil polyvalent permettant d'afficher des calendriers dans des applications Web. Si vous souhaitez utiliser ce plugin pour afficher uniquement le mois et l'année, au lieu du calendrier entier, voici comment procéder :

Une solution astucieuse implique une légère modification du code HTML et JavaScript. Dans le HTML, ajoutez une classe personnalisée au champ de saisie dans lequel vous souhaitez afficher le mois et l'année. Dans le code JavaScript, utilisez cette classe pour ajouter les options nécessaires à la configuration DatePicker.

Plus précisément, les options dont vous avez besoin sont :

• changeMonth : Autoriser le changement de mois
• changeYear : autoriser le changement d'année
• showButtonPanel : afficher le panneau de boutons avec "Terminé" et "Aujourd'hui" boutons
• dateFormat : spécifiez le format de sortie comme « MM aa » (par exemple, 10 mai)
• onClose : une fonction de rappel pour mettre à jour le champ de saisie avec le mois et l'année sélectionnés

Pour empêcher l'affichage du calendrier, ajoutez un style CSS pour masquer l'élément de calendrier (ui-datepicker-calendar).

Voici un exemple complet :

<label for="startDate">Date:</label>
<input name="startDate">

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

.ui-datepicker-calendar {
  display: none;
}

Ce hack vous permettra d'afficher uniquement le mois et l'année dans l'interface utilisateur jQuery DatePicker sans affecter sa fonctionnalité.

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!