Utilisation du composant Bootstrap-datetimepicker pour la sélection de dates et d'heures

Ce composant permet d'intégrer une interface conviviale pour la sélection de dates et d'heures dans vos applications web basées sur Bootstrap.

Inclusion des fichiers nécessaires

Pour utiliser le composant, vous devez inclure les fichiers suivants dans votre page HTML :

bootstrap.min.css : Feuille de style principale de Bootstrap.
bootstrap-datetimepicker.min.css : Styles spécifiques au composant de sélection de date/heure.
jquery-1.8.3.min.js (ou une version compatible) : Bibliothèque jQuery, indispensable pour le fonctionnement du composant.
bootstrap.min.js : Scripts principaux de Bootstrap.
bootstrap-datetimepicker.js : Script principal du composant.
locales/bootstrap-datetimepicker.fr.js (ou le fichier de langue souhaité) : Fichier de localisation pour afficher les noms des mois et jours dans la langue désirée (ici, le français).

Srtucture HTML de base

Voici un exemple de structure HTML pour intégrer le composant dans un formulaire :


<html lang="fr">
   <head>
       <meta charset="UTF-8" />
       <title>Sélection Date/Heure</title>
       <link href="bootstrap.min.css" rel="stylesheet" />
       <link href="bootstrap-datetimepicker.min.css" rel="stylesheet" />
   </head>
   <body>
       <!-- Votre contenu ici, par exemple un champ de saisie -->

       <script type="text/javascript" src="jquery.js"></script>
       <script type="text/javascript" src="bootstrap.min.js"></script>
       <script type="text/javascript" src="bootstrap-datetimepicker.js"></script>
       <script type="text/javascript" src="locales/bootstrap-datetimepicker.fr.js"></script>
       <script type="text/javascript">
           // Votre code JavaScript pour initialiser le composant ici
       </script>
   </body>
</html>

Initialisation du composant

L'initialisation se fait via JavaScript, en ciblant l'élément HTML désiré. Voici différentes manières de l'utiliser :

1. Champ de saisie simple

Pour un champ de saisie standard :

<input type="text" id="monChampDateHeure">

$('#monChampDateHeure').datetimepicker({
   format: 'yyyy-mm-dd hh:ii' // Format d'affichage : Année-Mois-Jour Heure:Minute
});

Vous pouvez également définir le format directement dans l'attribut data-date-format de l'élément HTML :

<input type="text" id="monChampDateHeure" data-date-format="yyyy-mm-dd hh:ii">

$('#monChampDateHeure').datetimepicker();

2. Intégré dans un groupe de champs Bootstrap

Utilisation avec les classes d'espacement de Bootstrap pour un rendu plus propre :

<div class="input-append date" id="monGroupeChamp" data-date="2012-02-12" data-date-format="dd-mm-yyyy">
   <input size="16" type="text" value="12-02-2012" readonly>
   <span class="add-on"><i class="icon-th"></i></span>
</div>

$('#monGroupeChamp').datetimepicker();

3. Intégré directement dans la page (Inline)

Pour afficher le sélecteur sans qu'il soit lié à un champ de saisie :

<div id="monSelecteurInline"></div>

$('#monSelecteurInline').datetimepicker();

Notez que pour une utilisation inline, vous devrez souvent spécifier les vues initiales et minimales pour qu'il soit fonctionnel comme un sélecteur complet.

Configuration avec des options

Le composant offre de nombreuses options pour personnaliser son comportemetn et son apparence. Ces options sont passées sous forme d'objet lors de l'initialisation.

Option `format`

Type : String
Défaut : 'mm/dd/yyyy'
Définit le format d'affichage et de saisie de la date/heure. Les codes courants incluent :

yyyy : Année complète (ex: 2023)
yy : Année sur deux chiffres (ex: 23)
MM : Mois sur deux chiffres (ex: 09)
M : Mois (ex: 9)
dd : Jour sur deux chiffres (ex: 05)
d : Jour (ex: 5)
HH : Heure (format 24h) sur deux chiffres (ex: 14)
H : Heure (format 24h) (ex: 14)
hh : Heure (format 12h) sur deux chiffres (ex: 02)
h : Heure (format 12h) (ex: 2)
mm : Minute sur deux chiffres (ex: 05)
m : Minute (ex: 5)
ss : Seconde sur deux chiffres (ex: 30)
s : Seconde (ex: 30)
P ou p : AM/PM

Option `weekStart`

Type : Integer
Défaut : 0 (Dimanche)
Indique le premier jour de la semaine (0 pour Dimanche, 6 pour Samedi).

Option `startDate`

Type : Date ou String
Défaut : Date actuelle
Définit la date la plus ancienne sélectionnable. Les dates antérieures seront désactivées.

Option `endDate`

Type : Date ou String
Défaut : Pas de limite
Définit la date la plus récente sélectionnable. Les dates ultérieures seront désactivées.

Option `daysOfWeekDisabled`

Type : String ou Array
Défaut : '' ou []
Permet de désactiver certains jours de la semaine (ex: '0,6' pour désactiver le week-end).

Option `autoclose`

Type : Boolean
Défaut : false
Si true, le sélecteur se ferme automatiquement après la sélection d'une date.

Option `startView`

Type : Number ou String
Défaut : 2 ou 'month'
Vue affichée par défaut à l'ouverture du sélecteur :

0 ou 'hour' : Vue des heures
1 ou 'day' : Vue des jours
2 ou 'month' : Vue des mois (par défaut)
3 ou 'year' : Vue des années (aperçu sur 12 mois)
4 ou 'decade' : Vue des décennies

Option `minView`

Type : Number ou String
Défaut : 0 ou 'hour'
Définit la granularité minimale de sélection (ex: si 2, l'utilisateur ne pourra sélectionner qu'un jour, pas une heure précise).

Option `maxView`

Type : Number ou String
Défaut : 4 ou 'decade'
Définit la vue maximale que l'utilisateur peut atteindre.

Option `todayBtn`

Type : Boolean ou "linked"
Défaut : false
Si true ou "linked", affiche un bouton "Aujourd'hui" :

true : Le bouton ramène à la vue du jour actuel.
"linked" : Le bouton sélectionne la date actuelle.

Option `todayHighlight`

Type : Boolean
Défaut : false
Si true, la date du jour est mise en évidence.

Option `keyboardNavigation`

Type : Boolean
Défaut : true
Permet de naviguer entre les dates en utilisant les touches fléchées du clavier.

Option `language`

Type : String
Défaut : 'en'
Définit la langue utilisée pour les noms des mois et jours. Assurez-vous que le fichier de langue correspondant est inclus (ex: 'fr' pour le français).

Option `forceParse`

Type : Boolean
Défaut : true
Si true, le composant tentera de parser et de corriger une date invalide entrée manuellement dans le champ avant de fermer le sélecteur.

Option `minuteStep`

Type : Number
Défaut : 5
Définit l'incrément des minutes dans la vue des heures. Par exemple, avec 15, les minutes proposées seront 00, 15, 30, 45.

Option `pickerPosition`

Type : String
Défaut : 'bottom-right'
Positionne le sélecteur par rapport au champ de saisie (ex: 'bottom-left').

Option `viewSelect`

Type : Number ou String
Défaut : Identique à minView
Permet de choisir la vue à partir de laquelle la sélection sera effectuée. Par défaut, c'est la vue la plus précise (définie par minView). Vous pouvez la définir à une vue plus large (ex: 'year') pour que chaque clic sur un élément (année, mois) mette à jour la date.

Option `showMeridian`

Type : Boolean
Défaut : false
Active le mode 12 heures (AM/PM) pour les vues "jour" et "heure".

Option `initialDate`

Type : Date ou String
Défaut : new Date()
Permet d'initialiser le sélecteur avec une date spécifique.

Exemple d'utilisation avec plusieurs options

Voici un exemple concret combinant plusieurs options pour un champ de date :

$('.form_date').datetimepicker({
       format: 'dd-mm-yyyy',     // Format : Jour-Mois-Année
       autoclose: true,          // Fermeture automatique après sélection
       todayHighlight: true,     // Mise en surbrillance de la date du jour
       minView: 2,               // Granularité minimale : jour (0=heure, 1=jour, 2=mois)
       weekStart: 1,             // Lundi comme premier jour de la semaine
       language: 'fr'            // Utilisation du français
   });

Étiquettes: Bootstrap JavaScript Date Picker Time Picker Formulaire

Publié le 15 juin à 16h33

L'Atelier Monstre

Utilisation du composant Bootstrap-datetimepicker pour la sélection de dates et d'heures

Inclusion des fichiers nécessaires

Srtucture HTML de base

Initialisation du composant

1. Champ de saisie simple

2. Intégré dans un groupe de champs Bootstrap

3. Intégré directement dans la page (Inline)

Configuration avec des options

Option `format`

Option `weekStart`

Option `startDate`

Option `endDate`

Option `daysOfWeekDisabled`

Option `autoclose`

Option `startView`

Option `minView`

Option `maxView`

Option `todayBtn`

Option `todayHighlight`

Option `keyboardNavigation`

Option `language`

Option `forceParse`

Option `minuteStep`

Option `pickerPosition`

Option `viewSelect`

Option `showMeridian`

Option `initialDate`

Exemple d'utilisation avec plusieurs options

Étiquettes Populaires

L'Atelier Monstre

Utilisation du composant Bootstrap-datetimepicker pour la sélection de dates et d'heures

Inclusion des fichiers nécessaires

Srtucture HTML de base

Initialisation du composant

1. Champ de saisie simple

2. Intégré dans un groupe de champs Bootstrap

3. Intégré directement dans la page (Inline)

Configuration avec des options

Option format

Option weekStart

Option startDate

Option endDate

Option daysOfWeekDisabled

Option autoclose

Option startView

Option minView

Option maxView

Option todayBtn

Option todayHighlight

Option keyboardNavigation

Option language

Option forceParse

Option minuteStep

Option pickerPosition

Option viewSelect

Option showMeridian

Option initialDate

Exemple d'utilisation avec plusieurs options

Étiquettes Populaires

Option `format`

Option `weekStart`

Option `startDate`

Option `endDate`

Option `daysOfWeekDisabled`

Option `autoclose`

Option `startView`

Option `minView`

Option `maxView`

Option `todayBtn`

Option `todayHighlight`

Option `keyboardNavigation`

Option `language`

Option `forceParse`

Option `minuteStep`

Option `pickerPosition`

Option `viewSelect`

Option `showMeridian`

Option `initialDate`