Maison > Article > interface Web > Comment importer un calendrier avec jquery
Comment importer un calendrier avec jquery
- WBOYoriginal
- 2023-05-25 11:54:08521parcourir
Avec le développement d'Internet, nos vies deviennent de plus en plus numériques et les applications sont de plus en plus diverses. Les composants de calendrier sont souvent utilisés lors du développement de sites Web. jquery est actuellement l'un des frameworks JavaScript les plus populaires et les plus pratiques. Il fournit une API riche qui nous permet de créer rapidement d'excellents composants de calendrier. Cet article explique comment utiliser jquery pour importer le composant de calendrier.
1. Téléchargez le plug-in de calendrier jquery
Vous devez d'abord ouvrir le site officiel de jquery (https://jquery.com/) pour télécharger le fichier de la bibliothèque jquery et sélectionner une version compatible pour référence. De plus, vous devez également télécharger le plug-in du calendrier jquery.
Il est recommandé d'utiliser le composant de sélection de date de jQuery UI. Téléchargez les fichiers pertinents sur le site officiel de jquery ui, qui incluent des fichiers CSS, des fichiers js et des images associées.
2. Créer la structure HTML
Dans le fichier HTML, vous devez utiliser les balises et attributs correspondants pour créer la structure du sélecteur de date. Ce qui suit est un code de base du sélecteur de date :
<!DOCTYPE html>
<html>
<head>
<title>jquery-datepicker</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>Dans ce code, nous avons introduit le fichier de bibliothèque jquery et le fichier de bibliothèque jquery ui. Dans la balise p de la partie body, nous avons créé une balise d'entrée et y avons ajouté l'attribut id "datepicker".
3. Utilisez jquery pour l'importation du calendrier
Ajoutez le code correspondant du composant de calendrier jquery dans la balise head. Ces codes incluent des références aux styles et aux scripts, ainsi qu'aux paramètres d'initialisation associés.
<!DOCTYPE html>
<html>
<head>
<title>jquery-datepicker</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: "yy-mm-dd"
});
});
</script>
<style>
.ui-datepicker {
font-size: 12px;
}
</style>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>Dans le code ci-dessus, nous avons introduit le composant calendrier de jquery ui et défini le format de date (dateFormat) sur "aa-mm-jj" dans la fonction d'initialisation. Dans le même temps, nous avons également ajouté un style simple qui modifie la taille de la police du calendrier.
À ce stade, notre composant de calendrier jquery a été importé avec succès ! Après avoir ouvert le fichier HTML dans le navigateur, vous pouvez voir une zone de saisie de calendrier.
Résumé
Avec la méthode ci-dessus, nous pouvons facilement importer le composant de calendrier à l'aide de jquery. En fait, en plus de fournir une API riche, jquery fournit également de nombreux autres composants et plug-ins pour créer facilement des sites Web puissants. J'espère que cet article pourra être utile à tout le monde, et j'espère également que tout le monde pourra utiliser habilement jquery dans des projets réels pour offrir une meilleure expérience aux utilisateurs.
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!