recherche

Maison >interface Web >js tutoriel >Comment puis-je afficher uniquement le mois et l'année à l'aide de jQuery UI DatePicker ?

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

Patricia Arquette
Patricia Arquetteoriginal
2024-11-30 20:51:18353parcourir

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

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

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

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!

jquery css html for select date format Calendar using Interface this display 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：JavaScript est-il vraiment asynchrone ou simplement principalement synchrone ?Article suivant：JavaScript est-il vraiment asynchrone ou simplement principalement synchrone ?

Articles Liés

Voir plus