Form custom date input field

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.

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

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

Not available

Upgrage to access the custom code

Not required. Copy and paste in webflow