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/
