Tutoriel Bootstrap Datepicker : 3 Simples Étapes pour le Réaliser Simplement

datepicker

Divi :  L’ultime thème WordPress polyvalent et boîte à outils complète

Divi est le numéro 1 des thèmes WordPress, il totalise près d’1.000.000 de téléchargements.

Il dispose des éléments suivants :

PLUS D’INFOS / TELECHARGER


Datepicker qui signifie en français sélecteur de date est un widget d’interface utilisateur graphique.

Lors de la conception d’un site web, il est intégré pour permettre aux utilisateurs de sélectionner une date ou une plage de date.

C’est un composant qui par défaut affiche un champ de saisie de date, et un calendrier qui apparaît lorsqu’on clique sur le champ de saisie.

Dans les lignes qui suivent, je vous montre étape par étape comment réaliser une datepicker à l’aide de Bootstrap.

PS : Vous avez à la fin du tutoriel, le lien de téléchargement du Bootstrap Datepicker (sélecteur de date conçu avec Bootstrap) dont l’image suit.

capture de bootstrap datepicker stylisé

LA SUITE APRÈS CETTE PUBLICITÉ

Les éléments indispensables pour notre bootstrap datepicker

Dans le domaine culinaire, pour réussir une croustillante pâte à pizza, certains ingrédients sont indispensables pour sa réussite.

Pareil pour la réalisation de notre bootstrap-datepicker, certains éléments clés sont fondamentaux pour qu’il soit fonctionnel.

Ces éléments clés sont : le plugin bootstrap-datepicker, les librairies bootstrap et jquery, et enfin une bibliothèque d’icônes.

Pour ce tutoriel, la bibliothèque d’icône que nous utiliserons est font-awesome.

Connaître ces éléments clés n’est que la première étape du processus de la réalisation de notre sélecteur de date.

Appel et Mise en place

Dans cette section, nous allons en premier faire appel aux librairies et ensuite voir comment mettre en place le bootstrap-datepicker.

Pour l’appel des librairies, nous avons deux possibilités.

La première est de les appeler depuis un CDN, et le second est de les télécharger et de les intégrer localement.

La première option nécessite d’être en ligne pour que le bootstrap-datepicker soit fonctionnel, mais ce n’est pas le cas de la seconde option.

Nous allons utiliser la première option.

Bien avant de vous montrer le code d’appel des bibliothèques, ouvrez votre éditeur de code et créez un fichier html.

Si c’est fait, dans le fichier html, faites appel aux librairies comme dans le code suivant.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
	<title>Bootstrap Datepicker</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!-- Appel de la Feuille de style minifiée De La librairie Bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- Appel de la Feuille de style minifiée De l'extension Datepicker -->
	<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
</head>
<body>

    <!-- Extension jquery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <!-- Extension DATEPICKER -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <!-- Noyau JavaScript de Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Les librairies sont en place, nous pouvons réaliser notre datepicker.

La datepicker consiste en la présence d’un champ, où la date sélectionnée s’affichera.

Nous allons créer notre champ, et pour aider les utilisateurs à savoir qu’il s’agit d’un champ pour un datepicker, nous allons rattacher au champ une icône de calendrier.

Voici le code de la constitution du champ.

<div class="form-group">
    <div class="input-group">
        <input type="text" placeholder="Choisir une date" class="form-control" id="reservationDate">
        <div class="input-group-append"><span class="input-group-text px-4"><i class="fa fa-calendar"></i></span></div>
    </div>
</div>

Pour que notre champ soit rattaché au calendrier de l’extension bootstrap datepicker, nous allons lui ajouter la classe ‘’datepicker’’.

Ce n’est pas tout.

Pour un bon positionnement du calendrier par rapport au champ, nous allons ajouter la classe ‘’date’’ au champ.

Finalement, le code de notre champ est ceci

<div class="form-group">
    <div class="datepicker date input-group">
        <input type="text" placeholder="Choisir une date" class="form-control" id="reservationDate">
        <div class="input-group-append"><span class="input-group-text px-4"><i class="fa fa-calendar"></i></span></div>
    </div>
</div>

Voici en image, ce que nous obtenons.

champ bootstrap

Il faut avouer que ce n’est pas du tout attrayant, nous allons le centrer au milieu à l’aide d’une grille bootstrap.

    <div class="container">
		<div class="row">
		    <div class="col-md-6 mx-auto">
		        <div class="form-group">
					<div class="form-group">
					    <div class="datepicker date input-group">
					        <input type="text" placeholder="Choisir une date" class="form-control" id="reservationDate">
					        <div class="input-group-append"><span class="input-group-text px-4"><i class="fa fa-calendar"></i></span></div>
					    </div>
					</div>
		        </div>
		    </div>
		</div>
	</div>

Maintenant, c’est nickel.

champ pour bootstrap datepicker

LA SUITE APRÈS CETTE PUBLICITÉ

Activation du bootstrap datepicker

Cette étape est la dernière du processus.

Après la mise en place du datepicker, il faut l’activer pour qu’elle soit fonctionnelle.

L’activation se fait à l’aide d’un code jquery.

Nous allons créer un fichier nommé script.js et nous allons le rattacher au fichier html comme dans le code ci-dessous.

    <!-- Script pour activation du datepicker -->
    <script src="script.js"></script>

Maintenant dans le fichier script.js, nous allons ajouter le code d’activation du plugin bootstrap-datepicker qui est le suivant.

$(function () {

    // ACTIVATION DU DATEPICKER 
    $('.datepicker').datepicker({
        clearBtn: true,
        format: "dd/mm/yyyy"
    });

});

Maintenant tout est okay, nous venons de réaliser une bootstrap datepicker fonctionnelle.

capture de bootstrap datepicker

Normalement le tutoriel est fini, mais nous allons rendre notre datepicker plus attrayante.

Un coup de jeune à notre bootstrap-datepicker

Nous allons personnaliser la datepicker avec du CSS.

Voici le résultat final auquel nous allons aboutir.

capture datepicker stylisé

La personnalisation va se faire à deux niveaux :

  • Nous allons premièrement personnaliser le champ
  • Puis styliser le calendrier

Créons un fichier style.css et rattachons-le au fichier html

	<!-- Feuille de style Personnalisée -->
	<link rel="stylesheet"  href="style.css">
  • Personnalisation du champ

Pour notre champ, nous allons redéfinir l’arrondissement de la bordure, et retirer tout effet à la bordure lorsqu’on clique sur le champ.

Pour l’icône rattachée au champ, sa couleur de fond sera conforme à celle du champ, et l’icône aura la couleur bleue.

.input-group {
    border-radius: 5px;
}

input.form-control {
    border-radius: 5px 0 0 5px;
    border: solid 1px rgba(0,0,0,.15);
    border-right: none;
}

input.form-control:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.15);
}

input.form-control::placeholder {
    font-family: 'Open sans', sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
}

.input-group-append {
    border: solid 1px rgba(0,0,0,.15);
    border-left: none;
    border-radius: 0 5px 5px 0;
}

.input-group-text {
    border-radius: 0 5px 5px 0;
    color: #04c;
    background-color: #fff;
    border: none;
}
  • Personnalisation du calendrier

Pour le calendrier, nous allons premièrement le positionner juste en dessous du champ. Ensuite aérer les jours du calendrier, et appliquer une couleur de fond bleu à l’entête du calendrier. Puis au pied du calendrier, lui appliquer une couleur de fond gris clair, lors du survol de la souris.

.datepicker-dropdown {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    margin-top: 102px;
}

.datepicker {
    padding: 0;
}

.datepicker td, .datepicker th {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.85rem;
}

.datepicker-dropdown:after {
    border-bottom-color: #08c;
}

.datepicker-days .table-condensed thead tr:nth-child(2), .datepicker-months .table-condensed thead tr:nth-child(2),
.datepicker-years .table-condensed thead tr:nth-child(2), .datepicker-decades .table-condensed thead tr:nth-child(2),
.datepicker-centuries .table-condensed thead tr:nth-child(2) {
    background: linear-gradient(to bottom,#08c,#04c);
    color: #fff;
}
.datepicker-days .table-condensed thead tr:nth-child(2) th:hover, .datepicker-months .table-condensed thead tr:nth-child(2) th:hover,
.datepicker-years .table-condensed thead tr:nth-child(2) th:hover,.datepicker-decades .table-condensed thead tr:nth-child(2) th:hover,
.datepicker-centuries .table-condensed thead tr:nth-child(2) th:hover {
    background: linear-gradient(to bottom,#08c,#04c);
    color: #fff;
}

.datepicker-days .table-condensed tfoot, .datepicker-months .table-condensed tfoot, .datepicker-years .table-condensed tfoot,
.datepicker-decades .table-condensed tfoot, .datepicker-centuries .table-condensed tfoot {
    border-top: solid 1px rgba(0,0,0,.15);
}

Nous venons de rendre attrayante la bootstrap datepicker que nous avons réalisée.

Télécharger Le Bootstrap datepicker

TÉLÉCHARGER BOOTSTRAP DATEPICKER

Personnaliser le Bootstrap Datepicker pour afficher les jours et les mois en français

Bootstrap Datepicker en français

Pour avoir le datepicker affichant les jours et les mois en français, vous devez effectuer les modifications suivantes dans votre code :

  • Ajoutez la bibliothèque de localisation française du Bootstrap Datepicker
  • Modifiez le format de la date dans le script d’activation du datepicker

Ajoutez la bibliothèque de localisation française du Bootstrap Datepicker avant le script d’activation du datepicker. Insérez la ligne de code suivante juste après l’inclusion du fichier JS de l’extension Datepicker :

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.fr.min.js"></script>

Ensuite, modifiez le format de la date dans le script d’activation du datepicker pour utiliser le format français (jour/mois/année). Remplacez cette ligne :

format: "dd/mm/yyyy"

Par celle-ci :

format: "dd/mm/yyyy",
language: "fr"

Votre nouveau code du script d’activation du datepicker doit être comme suit :

$(function () {
  $('.datepicker').datepicker({
     clearBtn: true,
     format: "dd/mm/yyyy",
     language: "fr"
  });
});

Si vous avez effectué correctement les modifications décrites ci-dessus, les jours et mois de votre Bootstrap Datepicker seront en français.

Autres tutoriels disponibles sur le blog

Maîtriser facilement le jeu d’affichage avec Bootstrap

Réaliser simplement une barre de navigation Bootstrap

Créer un site web facilement en 24 heures

3 étapes simples pour maîtriser le système de grille de Bootstrap

LA SUITE APRÈS CETTE PUBLICITÉ

Laisser un commentaire