1. Introduction
Dans le développement d'applications web, il est souvent nécessaire d'ajouter des fonctionnalités de sélection de date et d'heure pour faciliter les interactions avec les utilisateurs. Dans cet article, nous allons vous montrer comment intégrer un sélecteur de date et d'heure interactif dans votre application en utilisant jQuery UI et SweetAlert. Nous vous guiderons à travers les étapes nécessaires et vous fournirons un exemple de code pour faciliter la mise en œuvre.
Prérequis:
Avant de commencer, assurez-vous d'avoir les éléments suivants:
- Un éditeur de texte ou un environnement de développement intégré > (IDE) pour écrire et exécuter du code HTML, CSS et JavaScript.
- Une connexion Internet pour inclure les bibliothèques jQuery UI > et SweetAlert à partir de leurs CDN respectifs.vous pouvez les télécharger à partir des liens suivants :
- JQuery UI :
- Fichier JavaScript : jquery-ui.min.js
- Fichier CSS : jquery-ui.min.css
- jQuery UI Timepicker :
- Fichier JavaScript : jquery-ui-timepicker-addon.min.js
- Fichier CSS : jquery-ui-timepicker-addon.min.css
- SweetAlert :
- Fichier JavaScript : sweetalert2.min.js
- Fichier CSS : sweetalert2.min.css
2. Etapes de l'intégration:
Structure de base HTML:
Commencez par créer un fichier HTML avec le code suivant:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<button id="myButton">Cliquez ici</button>
<!-- bibliothèques -->
<!-- script -->
</body>
</html>
Inclusion des bibliothèques:
Dans le fichier html précédent, ajoutons le code suivant pour inclure les bibliothèques:
- jQuery et jQuery UI
- le plugin Timepicker de JQuery UI
- SweetAlert
<!-- Inclure jQuery et jQuery UI -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/humanity/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Inclure le plugin Timepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css">
<!-- Inclure SweetAlert -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
Pour ceux qui ont téléchargé les fichiers:
...
<link rel="stylesheet" href="chemin_vers/jquery-ui.min.css">
<link rel="stylesheet" href="chemin_vers/jquery-ui-timepicker-addon.min.css">
<link rel="stylesheet" href="chemin_vers/sweetalert2.min.css">
</head>
<body>
<button id="myButton">Cliquez ici</button>
<!-- Inclure jQuery et jQuery UI -->
<script src="chemin_vers/jquery-3.6.0.min.js"></script>
<script src="chemin_vers/jquery-ui.min.js"></script>
<!-- Inclure le plugin Timepicker -->
<script src="chemin_vers/jquery-ui-timepicker-addon.min.js"></script>
<!-- Inclure SweetAlert -->
<script src="chemin_vers/sweetalert2.min.js"></script>
...
Script JS de contrôle
Dans cette partie, nous verrons comment manipuler les différentes bibliothèques pour choisir la date et l'heure.
A la suite de l'inclusion des bibliothèques, ajoutons la balise avec le contenu suivant:
...
<!-- script -->
<script>
// Le code JavaScript pour gérer l'événement du bouton
$(document).ready(function () {
$("#myButton").on("click", function () {
swal.fire({
title: "Sélectionnez une date et une heure",
html: `<input type="text" id="datepicker">`,
showCancelButton: true,
showConfirmButton: true,
cancelButtonText: "Annuler",
confirmButtonText: "Valider",
didOpen: () => {
$("#datepicker").datetimepicker({
dateFormat: "yy-mm-dd", // Format de la date : AAAA-MM-JJ
timeFormat: "HH:mm", // Format de l'heure : HH:ii
minDate: 0, // Date minimale sélectionnable (0 pour aujourd'hui)
maxDate: "+1w" // Date maximale sélectionnable (1w pour une semaine à partir d'aujourd'hui)
});
},
preConfirm: () => {
const selectedDateTime = $("#datepicker").datetimepicker("getDate");
if (selectedDateTime) {
return selectedDateTime.toLocaleString();
} else {
swal.showValidationMessage("Veuillez sélectionner une date et une heure");
}
}
}).then((result) => {
if (result.isConfirmed) {
const selectedDateTime = result.value;
swal.fire("Date et heure sélectionnées :", selectedDateTime);
}
});
});
});
</script>
...
Le contenu de notre fichier html devrait ressembler au code suivant:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<button id="myButton">Cliquez ici</button>
<!-- Inclure jQuery et jQuery UI -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/humanity/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Inclure le plugin Timepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css">
<!-- Inclure SweetAlert -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
<script>
// Le code JavaScript pour gérer l'événement du bouton
$(document).ready(function () {
$("#myButton").on("click", function () {
swal.fire({
title: "Sélectionnez une date et une heure",
html: `<input type="text" id="datepicker">`,
showCancelButton: true,
showConfirmButton: true,
cancelButtonText: "Annuler",
confirmButtonText: "Valider",
didOpen: () => {
$("#datepicker").datetimepicker({
dateFormat: "yy-mm-dd", // Format de la date : AAAA-MM-JJ
timeFormat: "HH:mm", // Format de l'heure : HH:ii
minDate: 0, // Date minimale sélectionnable (0 pour aujourd'hui)
maxDate: "+1w" // Date maximale sélectionnable (1w pour une semaine à partir d'aujourd'hui)
});
},
preConfirm: () => {
const selectedDateTime = $("#datepicker").datetimepicker("getDate");
if (selectedDateTime) {
return selectedDateTime.toLocaleString();
} else {
swal.showValidationMessage("Veuillez sélectionner une date et une heure");
}
}
}).then((result) => {
if (result.isConfirmed) {
const selectedDateTime = result.value;
swal.fire("Date et heure sélectionnées :", selectedDateTime);
}
});
});
});
</script>
</body>
</html>
3. Explication du code:
- Le code HTML fournit un bouton avec l'ID "myButton" pour déclencher l'affichage du sélecteur de date et d'heure.
- Les bibliothèques **jQuery et jQuery UI** sont incluses à l'aide des balises
<script>et<link>en utilisant leurs CDNs respectifs.- Le plugin jQuery UI Timepicker est également inclus de la > même manière pour faciliter la sélection de l'heure.
- SweetAlert est inclus pour afficher des messages et des alertes personnalisés.
- Le code JavaScript est encapsulé dans une fonction $(document).ready() pour s'assurer que le script est exécuté une fois que le document HTML est chargé.
- Lorsque le bouton est cliqué, SweetAlert affiche une boîte de dialogue personnalisée avec un champ de saisie pour sélectionner la date et l'heure.
- Les options du sélecteur de date et d'heure sont configurées à l'aide du plugin Timepicker.
- Lorsque l'utilisateur clique sur "Valider", la date et l'heure sélectionnées sont récupérées et affichées dans une nouvelle alerte SweetAlert.
4. Conclusion:
Dans cet article, vous avez appris comment intégrer un sélecteur de date et d'heure interactif dans votre application web en utilisant les bibliothèques jQuery UI et SweetAlert. Le code fourni vous permet d'afficher une boîte de dialogue personnalisée pour sélectionner facilement une date et une heure, avec des options de personnalisation supplémentaires disponibles grâce aux bibliothèques jQuery UI. Profitez de ces fonctionnalités pour améliorer l'expérience utilisateur de vos applications web et faciliter les interactions liées aux dates et aux horaires.
Top comments (0)