Webflow Forms

Date Pickers

No items found.
Overview
Webflow Forms Basics
Intro
001
Webflow Forms Limitations & Bugs
002
Basic Form Controls
Form Select
051
Form Textarea
052
Customizing Input Controls
Customizing Radio Buttons & Checkboxes
Intro
101
Input Number & Decimal Places
Intro
102
Numeric Range Sliders
Intro
102
Multi-Select Dropdown
Intro
104
Auto-Size Textareas
Int
110
Date Pickers
Intro
111
Forms Validation
Forms Validation Basics
Intro
200
Input Types
Intro
201
Using Regex Patterns in Forms Validation
Intro
202
Custom Validation Errors
Adv
203
Forms Validation Techniques
Validating Emails
Intro
301
Blocking Free Email Provider Addresses
Intro
302
Requiring Checkboxes
Intro
302
International Phone Numbers
Int
6:50
304
Databinding
Databinding CMS Collections to a Form Select
8:42
401
Forms Validation Techniques
3rd Party Form Handlers
Intro
401
Making Forms Dynamic
Displaying Form Parts Conditionally
14:36
501
Multi-Step Forms (MSFs)
Intro
501
SPAM Blocking Techniques
CAPTCHA Approaches
601
Form Handlers
3rd Party Form Handlers
901
Integrating the Basin Form Handler
902
Uploading Files
904
No items found.

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.

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.