Comment mettre Bootstrap Datepicker en français ?

Réponses rédigées par Antoine
Dernière mise à jour : 2018-05-02 17:40:35
Thèmes : script - javascript - bootstrap - datepicker - webmaster
Question

Quel est le code JS à utiliser pour mettre le calendrier Datepicker en français avec Bootstrap ?

Réponse

Pour que le calendrier Datepicker soit en français avec Bootstrap, vous devez :

  • Inclure les fichiers CSS de bootstrap et de bootstrap-datepicker entre vos balises HEAD.
  • Inclure en bas de page les fichiers JS de jQuery, de jQueri-UI, de bootstrap et de bootstrap-datepicker.

Il faut ensuite ajouter le script suivant :

<script>
;(function($){
$.fn.datepicker.dates['fr'] = {
days: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
daysShort: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
daysMin: ["d", "l", "ma", "me", "j", "v", "s"],
months: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
monthsShort: ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."],
today: "Aujourd'hui",
monthsTitle: "Mois",
clear: "Effacer",
weekStart: 1,
format: "dd/mm/yyyy"
};
}(jQuery));

$('.datepicker').datepicker({
language: 'fr',
autoclose: true,
todayHighlight: true
})
</script>

Voici le code complet pour afficher le calendrier Datepicker en français avec Bootstrap :

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"rel="stylesheet">
</head>
<body>
<input type="text" class="form-control datepicker" placeholder="sélectionnez une date">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script>
;(function($){
$.fn.datepicker.dates['fr'] = {
days: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
daysShort: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
daysMin: ["d", "l", "ma", "me", "j", "v", "s"],
months: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
monthsShort: ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."],
today: "Aujourd'hui",
monthsTitle: "Mois",
clear: "Effacer",
weekStart: 1,
format: "dd/mm/yyyy"
};
}(jQuery));

$('.datepicker').datepicker({
language: 'fr',
autoclose: true,
todayHighlight: true
})
</script>
</body>
</html>

Note : Vous trouverez l'ensemble des dernières versions des librairies sur https://cdnjs.com/libraries