Date Pickers

Webflow does not support a date type in its input field types, or offer a date picker directly, however there are a number of options to make this work.

HTML5 Date Picker

HTML5 already has a built-in date picker which is an ideal solution in many cases, because it allows mobile browsers to offer a date-picking interface that is thumb-friendly.

To enable this, we simply need to change the Input element's type to date. Unfortunately Webflow as reserved the word type and it cannot be used as a custom attribute, so you need to change this via script.

To do this, you can place a standard text entry field, and give it an ID like _date-input.

Then in your /body custom code;

_<script>

 _{window.addEventListener('load', function() {}

   _{var input = document.getElementById('date-input');}

   _{if (input) {}

     _{input.type = 'date';}

   _}

 _});

_</script>

‍

Third Party Date Pickers

There are a lot of libraries that provide a date-picker UX here.

Flowbase

Possibly the most Webflow-compatible design, for styling purposes.

• Docs - https://www.flowbase.co/blog/how-to-add-a-date-picker-to-your-webflow-form
• Cloneable - https://webflow.com/made-in-webflow/website/Webflow-Date-Picker

Based on Fengyuanchen's open source date picker.

Flatpickr

https://flatpickr.js.org/

Offers some special additional features like date-range and multi-date selection.

Date Range Picker

https://www.daterangepicker.com/

‍

https://www.cssscript.com/tag/date-picker/

‍