recherche

Maison  >  Article  >  interface Web  >  Comment afficher uniquement le mois et l'année dans jQuery UI DatePicker ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-11-26 17:09:14336parcourir

How to Display Only Month and Year in jQuery UI DatePicker?

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

Le plugin DatePicker de jQuery UI offre la possibilité de personnaliser son apparence. Pour les scénarios où l'affichage du calendrier complet n'est pas nécessaire, les utilisateurs peuvent souhaiter afficher uniquement le mois et l'année.

Solution :

Pour y parvenir, un "hackish " Pourtant, une approche fonctionnelle implique de masquer par programme le composant de calendrier et de modifier la configuration JavaScript. Voici un exemple :

<html>
<head>
    <script src="jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link rel="stylesheet" href="jquery-ui.css">
    <script>
        $(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));
                }
            });
        });
    </script>
    <style>
        .ui-datepicker-calendar {
            display: none;
        }
    </style>
</head>
<body>
    <label for="startDate">Date:</label>
    <input name="startDate">

Cette approche désactive la visibilité du calendrier tout en préservant la fonctionnalité de sélection du mois et de l'année. Le gestionnaire d'événements onClose ajuste la date sélectionnée au premier jour du mois et de l'année choisis, garantissant que seuls le mois et l'année sont affichés dans la zone de saisie.

Solutions améliorées :

Au fil du temps, des solutions plus raffinées ont émergé, répondant aux inconvénients potentiels de l'approche originale. Une de ces solutions consiste à remplacer la méthode _selectDay de jQuery UI pour empêcher la sélection des jours calendaires. Cette approche permet une gestion plus robuste de la saisie de la date tout en fournissant l'affichage du mois et de l'année souhaité.

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!

JavaScript jquery for while date Calendar Event this display input ui
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment puis-je réinitialiser l’état du Redux Store pour maintenir l’intégrité de l’application après la déconnexion de l’utilisateur ?Article suivant：Comment puis-je réinitialiser l’état du Redux Store pour maintenir l’intégrité de l’application après la déconnexion de l’utilisateur ?

Articles Liés

Voir plus