Comment modifier jQuery UI DatePicker pour afficher uniquement le mois et l'année ?

Modification de jQuery UI DatePicker pour afficher le mois et l'année uniquement

Dans les applications Web, l'affichage dynamique des sélecteurs de date interactifs peut être essentiel. jQuery UI fournit un plugin DatePicker polyvalent à cet effet. Cependant, il peut y avoir des scénarios dans lesquels vous préférez afficher uniquement le mois et l'année, sans la grille du calendrier elle-même.

Pour répondre à un tel besoin, explorons un hack JavaScript qui modifie le comportement de DatePicker :

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

Dans l'extrait de code fourni, le rappel onClose joue un rôle crucial. Lorsque le panneau de sélection de date est fermé, il garantit que seules les valeurs du mois et de l'année sélectionnées sont reflétées dans le champ de saisie. Au lieu de sélectionner un jour spécifique, la méthode setDate() définit la date de l'entrée sur le premier jour du mois et de l'année choisis.

Pour terminer la modification, vous devrez styliser le sélecteur de date à l'aide de CSS pour masquer la grille du calendrier :

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

Avec ces ajustements JavaScript et CSS, vous pouvez utiliser efficacement jQuery UI DatePicker pour afficher uniquement les options de mois et d'année, en répondant aux exigences d'interface utilisateur spécialisées de votre candidature.

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!