Comment puis-je afficher uniquement le mois et l'année à l'aide de jQuery UI DatePicker ?-js tutoriel-php.cn

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

Patricia Arquette

Libérer： 2024-11-30 20:51:18

original

342 Les gens l'ont consulté

How Can I Display Only Month and Year Using jQuery UI DatePicker?

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é grâce à 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));
    }
    });
});

Copier après la connexion

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;
}

Copier après la connexion

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

Copier après la connexion

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!