contact@bootstrap-top-design.com

Comment réaliser simplement un bootstrap datepicker

datepicker

Ce blog est soutenu par ses lecteurs. Lorsque vous achetez par le biais de liens affiliés sur notre site, nous percevons une commission. En savoir plus

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

Présent sur un site web, il permet 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 apparait 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 dont l’image suit.

capture de bootstrap datepicker stylisé

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.

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 appeler localement.

La première option nécessite d’être en ligne pour que le bootstrap-datepicker soit fonctionnel, alors que la seconde non.

Nous allons utiliser la première option.

J’ai choisi cette option, pour rendre légère la page.

A quoi bon d’installer toute une bibliothèque avec des dizaines d’éléments, alors qu’on en a besoin que d’un seul.

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

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 l’UI Bootstrap datepicker personnalisé



TELECHARGER

Autres tutoriels disponibles sur le blog

Laisser un commentaire