Form custom date input field

Copy component

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.

Signup and upgrade to pro plan to access custom code

<!-- paste in head tag -->
<!-- Datepicker stylesheet -->
<link rel="stylesheet" href="https://fengyuanchen.github.io/datepicker/css/datepicker.css">

 <style>

  /* You can apply your own colors below!  */
    :root {
        --main-light-color: #f5f5f5; /*is the light grey */
        --main-dark-color: #121331; /* is the text*/
        --main-active-color: #2962ff; /*  is the highlight
    you can just add like red, or blue or any helx you like! */
    }

    .datepicker-dropdown {
        border-radius: 6px !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: 6px 0 0 6px;
    }

    .datepicker-panel>ul[data-view="week"] li:last-child {
        border-radius: 0 6px 6px 0;
    }

    .datepicker-top-left::before,
    .datepicker-top-left::after {
        display: none;
    }

		.datepicker-panel>ul>li.highlighted {
        color: var(--main-active-color);
        background: none !important;
        border: 1px solid var(--main-light-color);
        border-radius: 8px;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
    }


    .datepicker-panel>ul>li.picked,
    .datepicker-panel>ul>li.picked:hover {
        color: var(--main-active-color);
        background: var(--main-light-color);
        border-radius: 8px;
        font-style: normal;
        font-weight: 700;
        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: 6px;
    }

    .datepicker-panel>ul>li:hover {
        background: var(--main-light-color);
        border-radius: 6px;
    }

    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>

<!--paste in body tag -->
<!--🟢 DATE PICKER CODE 🟢--><script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
<script>    
$(document).ready(function () {       
$('[data-input="datepicker"]').datepicker({            
format: 'mm-dd-yyyy'       
});        
// Available date placeholders:        
// Year: yyyy        
// Month: mm        
// Day: dd   
});</script>

Form custom date input field

Signup and upgrade to pro plan to access custom code

Not required

Not required

Not required

Form custom date input field

Signup and upgrade to pro plan to access custom code

Not required

Not required

Not required

Hi I am Ayush Kumar, founder of flowblocks.org. I am senior webflow developer with 5 years in web development.

Upgrade to pro @ $39.00 / one time