Ajouter un datepicker dans Webflow
1. Ajoutez un input field
| Attribut custom | Valeur | Rôle |
|---|---|---|
| data-toggle | datepicker | Déclenche le datepicker sur l'input |
| autocomplete | off | Désactive l'autocomplétion native du navigateur |
L'input field vous servira comme trigger pour l'affichage du datepicker et récupérera la date sélectionnée par votre prospect. Nous avons utilisé cette solution à plusieurs reprise au sein de notre agence Webflow.
2. Ajoutez ces 2 attributs personnalisés
- data-toggle = datepicker
- autocomplete = off
3. Ajoutez ce code personnalisé dans la balise <head> de votre page
<>
4. Ajoutez ces bouts de code avant le <body>
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 ;
--main-couleur-foncée : #321f59 ;
--main-active-color : #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 à chatGPT d'y appliquer le style que vous voulez !
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.
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.
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
