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

Attributes personnalisés datepicker Webflow

‍

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 !

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

‍

bon à savoir

La librairie fengyuanchen/datepicker n'est plus activement maintenue depuis 2020. Pour de nouveaux projets, des alternatives modernes sont disponibles : Flatpickr (légère, sans jQuery), Pikaday, ou l'input HTML5 natif type='date'.

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.