Comment afficher uniquement le mois et l'année dans jQuery UI DatePicker ?-js tutoriel-php.cn

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

Susan Sarandon

Libérer： 2024-11-26 17:09:14

original

335 Les gens l'ont consulté

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">

Copier après la connexion

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!