Aller au contenu

Recommandez Gemeos à votre réseau et touchez une commission

Découvrir notre système d’apport d’affaires
On en discute ?

No-code7 min lecture

Ajouter un datepicker dans Webflow

1. Ajoutez un input field

Attribut customValeurRôle
data-toggledatepickerDéclenche le datepicker sur l'input
autocompleteoffDé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.

Datepicker Field 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

<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 ;
--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 !

Datepicker Webflow

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.

Publié le 10 avr. 2025

Sandro DA SILVA

Growth Marketer, expert Webflow et touche à tout. Sandro s'occupe des opérations commerciale, veille au bon déroulement des projets et s’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)

Ces tutoriels pourraient vous intéresser

Tutoriels similaires

Voir tout

Vous allez notre collaboration, c’est garanti

Prêt à faire décoller votre activité ?

demander un devis

Let’s f*****G GO !!