Ajouter un datepicker dans Webflow

outils :

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. 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 à chatGTP d'y appliquer le style que vous voulez !

Datepicker Webflow
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.

Photo de l'auteur
Sandro D.
Mis à jour le
8/10/2024
Growth Marketer, expert Webflow et touche à tout. Je m'occupe des opérations commerciale, veille au bon déroulement des projets et m’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)
Accueil
>
Gemeos Académie
>
Ajouter un datepicker dans Webflow
Illustration croce
Ces tutoriels pourraient vous intéresser

Nos tutoriels de la même catégorie

Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

développés avec les meilleurs outils et les meilleurs pratiques

Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal. 

Figma

Pour le design de votre site web

Webflow

Pour l’intégration de votre site web

Client-first

Pour organiser vos projets

Wized

Pour ajouter des fonctionnalité à vos projets

Make

Pour l’automatisation de vos flux de travail