1. Ajoutez un input field L'input field vous servira comme trigger pour l'affichage du datepicker et récupérera la date sélectionnée par votre prospect.
2. Ajoutez ces 2 attributs personnalisés data-toggle = datepickerautocomplete = off
3. Ajoutez ce code personnalisé dans la balise <head> de votre page <link rel="stylesheet" href="https://fengyuanchen.github.io/datepicker/css/datepicker.css">
<>
4. Ajoutez ces bouts de code avant le <body> <script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script> <script>
$(document).ready(function () {
$('[data-toggle="datepicker"]').datepicker({
format: 'mm-dd-yyyy'
});
// Available date placeholders:
// Year: yyyy
// Month: mm
// Day: dd
if (window.innerWidth < 768) {
$('[data-toggle="datepicker"]').attr('readonly', 'readonly')
}
});
</script> <style>
/* You can apply your own color!
--main-light-color is the light grey,
--main-dark-color is the text
--main-active-color is the highlight
you can just add like red, or blue or any helx you like! */
:root {
--main-light-color: #f3f5fb;
--main-dark-color: #321f59;
--main-active-color: #642eff;
}
.datepicker-dropdown {
border-radius: 8px !important;
border: 0 !important;
-webkit-box-shadow: 0px 48px 88px rgba(23, 9, 54, 0.08);
box-shadow: 0px 48px 88px rgba(23, 9, 54, 0.08);
box-sizing: border-box;
}
.datepicker-panel>ul[data-view="week"]>li {
background-color: var(--main-light-color);
color: var(--main-dark-color);
font-weight: bold;
text-transform: uppercase;
margin: 0;
height: initial;
padding-top: 3px;
margin-bottom: 4px;
}
.datepicker-panel>ul[data-view="week"]>li:hover {
background-color: var(--main-light-color);
color: var(--main-dark-color);
border-radius: 0px;
}
.datepicker-panel>ul[data-view="week"] li:first-child {
border-radius: 20px 0 0 20px;
}
.datepicker-panel>ul[data-view="week"] li:last-child {
border-radius: 0 20px 20px 0;
}
.datepicker-top-left::before,
.datepicker-top-left::after {
display: none;
}
.datepicker-panel>ul>li.picked,
.datepicker-panel>ul>li.highlighted,
.datepicker-panel>ul>li.picked:hover {
color: var(--main-active-color);
background: var(--main-light-color);
border-radius: 8px;
font-style: normal;
font-weight: 500;
font-size: 14px;
}
li[data-view="month current"],
li[data-view="year current"] {
text-align: left;
color: var(--main-dark-color);
font-style: normal;
font-weight: 500;
font-size: 14px;
/* line-height: 24px; */
padding-left: 15px;
border-radius: 10px;
}
.datepicker-panel>ul>li:hover {
background: var(--main-light-color);
border-radius: 10px;
}
li[data-view="month current"],
li[data-view="year current"],
li[data-view="years current"] {
margin-bottom: 4px !important;
}
@media screen and (min-width: 768px) {
.datepicker-dropdown {
width: 364px;
padding: 12px;
}
.datepicker-panel>ul>li {
width: 48px;
height: 48px;
padding-top: 10px;
}
li[data-view="month next"],
li[data-view="year next"],
li[data-view="years next"] {
position: absolute;
right: 18px
}
li[data-view="month prev"],
li[data-view="year prev"],
li[data-view="years prev"] {
position: absolute;
right: 66px
}
ul[data-view="months"] li,
ul[data-view="years"] li {
padding-top: 0px;
width: 57px !important;
}
}
@media screen and (max-width: 768px) {
.datepicker-panel {
transform: scale(0.97);
}
}
</style>
5. Plus qu'à mettre du style Vous pouvez facilement mettre à jour les couleurs de votre datepicker en utilisant les premières lignes de style
--main-light-color : #f3f5fb ;#321f59 ;#642eff ;
Si vous êtes à l'aise avec le CSS, vous pouvez même personnalisé plus en détail le rendu de votre datepicker (largeur, hauteur, police...).
Et si vous êtes pas super à l'aise, copier/coller le css (le 3ème bout de code ci-dessus, celui entre les balise <style>) et demander à chatGTP d'y appliquer le style que vous voulez !
Bon à savoir
Vous pouvez modifier le format de la date simplement en modifiant mm-dd-yyyy par dd-mm-yyyy pour l'adapter au format français
6. Publiez et testez
7. Modifier le format pour avoir un datepicker au format français (fr-FR) Utilisez ce <script> dans le <body> de votre page à la place du code stipulé au point 4.
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
<script>
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery')) :
typeof define === 'function' && define.amd ? define(['jquery'], factory) :
(factory(global.jQuery));
}(this, (function ($) {
'use strict';
$.fn.datepicker.languages['fr-FR'] = {
format: 'dd/mm/yyyy',
days: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
daysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
daysMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
weekStart: 1,
months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
monthsShort: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jun', 'Jui', 'Aoû', 'Sep', 'Oct', 'Nov', 'Dec'] };
})));
</script>
<script>
$(document).ready(function () {
$('[data-toggle="datepicker"]').datepicker({
language: 'fr-FR'
});
if (window.innerWidth < 768) {
$('[data-toggle="datepicker"]').attr('readonly', 'readonly');
}
});
</script>
Si vous souhaitez en savoir plus sur le composant, je vous partage la doc juste ici . De quoi modifier le format, l'affichage, et y ajouter certaines fonctionnalités que vous pourriez trouver intéressantes.
