How to Add a Date Picker to your Webflow Form

Tutorials

January 1, 2022

Learn how to add a customizable date picker to your Webflow form in 30 seconds. Range date version is also available in our guides section

Clone & Remix

Preview Live

Overview 📚

Adding a date picker into your Webflow forms doesn't need to be complicated, and it certainly doesn't need to be ugly.

That's why we built a beautiful, modern date picker that you can integrate into your own projects.

This date picker uses an attribute that you attach to an input field, so it really couldn't be easier.

To add this into your project, follow the simple steps and add the custom code into your project or page settings.

{{ Template "gist" "text:Inside <head> tag" "id:1d63d47a3b32eb0edaee5bcd91495382" }}

{{ Template "gist" "text:Before </body> tag" "id:708e24dd706ae5ae08def8d93988b27c" }}

Instructions ✍️

1. Add the custom code into your page.

Navigate to your project or page settings area and add the custom code into both the <head> and </body> tag area.

We included some of the basic CSS properties so you can easily adjust the color styles to more closely suit your requirements.

This project is built on-top of the wonderfully simple Jquery plugin from Fengyuan Chen (Github).

Read-only Preview (Code in Page Settings)

https://preview.webflow.com/preview/webflow-date-picker?utm_medium=preview_link&utm_source=designer&utm_content=webflow-date-picker&preview=033289c86d17f2026974458c59b41ec8&workflow=preview

‍

Add the following style sheet inside the <head> tag of your custom code section

‍

2. Add the js script & custom styles

Add this code inside the before </body> tag of your custom code:

‍

3. Add an Input Field & Custom Attributes

The input field needs to be added into your form section. Once you've added the input, navigate to the settings panel and add the attributes

‍

4. Custom Attributes

The input field needs to be added into your form section. Once you've added the input, navigate to the settings panel and add the attributes

data-toggle - datepicker
autocomplete - off

‍

5. Publish & Test

That's it, you can style the css if you are comfortable with that. Remember this will only be visible on your live domain and can't be previewed inside the designer.

‍

6. Update Colours & Date Format

You can easily update the system colors using the first few lines in the styles

--main-light-color: #f3f5fb;
--main-dark-color: #321f59;
--main-active-color: #642eff;

Example of Colour Updates from Joe (https://twitter.com/cuhpajo)

Thanks!

How to Add a Date Picker to your Webflow Form

Overview 📚

{{ Template "gist" "text:Inside <head> tag" "id:1d63d47a3b32eb0edaee5bcd91495382" }}

{{ Template "gist" "text:Before </body> tag" "id:708e24dd706ae5ae08def8d93988b27c" }}

Instructions ✍️

1. Add the custom code into your page.

Read-only Preview (Code in Page Settings)

2. Add the js script & custom styles

3. Add an Input Field & Custom Attributes

4. Custom Attributes

5. Publish & Test

6. Update Colours & Date Format

Check out some other articles!

How to add a countdown timer to Framer

How to add an Instagram Feed to Framer (2023)

How to Add a Before & After Image Slider to Framer

Expert Episode 1: Oguz Yagiz Kara (Product Designer)

We're working on some updates.

How to Add a Date Picker to your Webflow Form

Overview 📚

{{ Template "gist" "text:Inside <head> tag" "id:1d63d47a3b32eb0edaee5bcd91495382" }}

{{ Template "gist" "text:Before </body> tag" "id:708e24dd706ae5ae08def8d93988b27c" }}

Instructions ✍️

1. Add the custom code into your page.

Read-only Preview (Code in Page Settings)

2. Add the js script & custom styles

3. Add an Input Field & Custom Attributes

4. Custom Attributes

5. Publish & Test

6. Update Colours & Date Format

Check out some other articles!

How to add a countdown timer to Framer

How to add an Instagram Feed to Framer (2023)

How to Add a Before & After Image Slider to Framer

Expert Episode 1: Oguz Yagiz Kara (Product Designer)

Join Over 55,000+Creators Today

Join Over 55,000+
Creators Today