Intégration d'un sélecteur de date et d'heure dans votre application web avec jQuery UI et SweetAlert

Birewa Audrey AMONA — Fri, 14 Jul 2023 12:00:00 +0000

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.

Code disponible sur codepen ou sur github

Why Choose Vue.js for Frontend Development

Birewa Audrey AMONA — Thu, 13 Jul 2023 19:07:34 +0000

Introduction:
Frontend development is an ever-evolving field with numerous options available to developers. Among the most popular JavaScript frameworks, Vue.js has quickly emerged as a preferred choice for many developers. In this article, we will explore why choosing Vue.js for frontend development is advantageous and the benefits it offers.

1. Easy to Learn and Get Started:
Vue.js stands out with its gentle learning curve, making it ideal for frontend development beginners. With its simple and intuitive syntax, developers can quickly create interactive applications without having to master complex concepts. Comprehensive documentation and an active Vue.js community are valuable resources for developers looking to deepen their knowledge.

2. Flexibility and Modularity:
Vue.js follows a component-based approach, making it easy to create modular and reusable user interfaces. Vue.js components can be combined to form complex applications, enabling easy management of different parts of a frontend application. This modular approach also facilitates maintenance and updates, as each component can be managed independently.

3. Optimized Performance:
Vue.js is designed to deliver good performance, crucial for a smooth user experience. It utilizes an efficient virtual DOM rendering system, minimizing DOM manipulations and ensuring fast and efficient UI updates. Additionally, Vue.js provides tools such as server-side rendering (SSR) and the ability to generate optimized files for better performance.

4. Rich Ecosystem and Active Community:
Vue.js benefits from a rich ecosystem with numerous plugins and complementary libraries, making it easy to integrate additional features into your applications. Whether it's state management (such as Vuex), routing (such as Vue Router), or animation (such as Vue.js Transitions), you'll find suitable solutions for your needs. Furthermore, the active Vue.js community offers valuable support and helps you stay up to date with the latest trends and best practices.

5. Growing Adoption and Stability:
Since its introduction, Vue.js has experienced growing adoption among frontend developers and companies worldwide. Many major companies, such as Xiaomi, Alibaba, and GitLab, have adopted Vue.js for their projects. This widespread adoption ensures the stability and longevity of Vue.js, with regular updates and ongoing evolution.

Conclusion:
Vue.js offers numerous advantages for frontend development, whether you're a beginner or an experienced developer. Its gentle learning curve, flexibility, optimized performance, rich ecosystem, and active community make it an attractive choice for building reactive and dynamic user interfaces. If you're looking for a versatile and efficient frontend framework, Vue.js is definitely worth considering.

Make accordion with Jquery

Birewa Audrey AMONA — Sun, 09 Jul 2023 08:36:11 +0000

DEV Community: Birewa Audrey AMONA

Intégration d'un sélecteur de date et d'heure dans votre application web avec jQuery UI et SweetAlert

Why Choose Vue.js for Frontend Development

Make accordion with Jquery