Functional

Add a datepicker in Webflow

outils :
Illustration croce

Table of contents

1. Add an input field

The input field will serve you as a trigger for displaying the datepicker and will retrieve the date selected by your prospect.

Datepicker Field Webflow

2. Add these 2 custom attributes

  • Data-Toggle = date picker
  • Autocomplete = off
Attributes personnalisés datepicker Webflow

3. Add this custom code to <head>your page tag

 <link rel="stylesheet" href="https://fengyuanchen.github.io/datepicker/css/datepicker.css">

<>

4. Add these code snippets before <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. All that's left to do is add style

You can easily update the colors on your datepicker using the first lines of style.

--main-light-color: #f3f5fb ;
--hand-dark-color: #321f59 ;
--main-active-color: #642eff ;

If you are comfortable with CSS, you can even customize the rendering of your datepicker in more detail (width, height, font...).

And if you are not super comfortable, copy/paste the css (the 3rd piece of code above, the one between the tags<style>) and ask ChatGTP to apply the style you want!

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. Publish and test

7. Change the format to get a datepicker in French format (fr-FR)

Use this <script>in the <body>of your page in place of the code in 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>

If you want to know more about the component, I share The doc right here. Enough to change the format, the display, and add some features that you may find interesting.

These tutorials might interest you

Our tutorials in the same category

Add a summary in Webflow

Webflow
Finsweet
Fonctionnel

Customize the design of dot sliders in Webflow

Webflow
Embed
Fonctionnel

Automate the sending of an email to prospects who fill out a form

Webflow
Zapier
Fonctionnel
See all our tutorials
Illustration traits
We use the best tools

Your site is developed using the best tools and best practices

Gemeos doesn't just offer you a website, but expertise in the best tools to guarantee you the best possible return on your investment.

Figma

To design your custom website and optimize its conversion rate

Webflow

For pixel-perfect, optimized integration of your website

Client-first

Organizing your project to perfection

Wized

To add advanced features to your project

Make

Automate your workflows and save maximum time