Back to Blog

How to add a date picker to your Webflow form

Add a date picker to your Webflow form in 30 seconds.

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.


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


This project is built on-top of the wonderfuly simply Jquery plugin from Fengyuan Chen.


You can see the projects github here https://fengyuanchen.github.io/datepicker/

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

1. Add the style sheet inside the <head>

Navigate to your page settings area and scroll to the bottom custom code area.


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

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

6. Update Colors & 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 Color Updates from Joe (https://twitter.com/cuhpajo)



Thanks!

Recieve webflow resources directly to your mailbox.

Sign up to get weekly insights & inspiration in your inbox.

OTHER GUIDES & LESSONS

Boost your webflow site further.

Join Over 20,000
Creators Today

Join our newsletter list for occasional updates, products and insights.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Join 20,000+ other creators across our communities.