Webflow Date Picker Input

Step 1

Below is some custom CSS that you need to add to the page <header> code. You can access the code via the Designer.

CUSTOM CSS
Step 2

Add the following code to your page before the closing <body> tag.

I recommend copying the code on the published site to preserve line breaks.

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

Credits

I discovered this code on the Flowbase blog.

Clone the Complete UI Kit 👇

Everything below is an iframe. Click "Clone in Webflow" to get yourself a copy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.