Return to articles
How to add a date picker to your webflow forms
Tutorials

How to add a date picker to your webflow forms

Simple date picker for forms

Flowbase
January 5, 2019
Example of Date Picker in use

Step 1:

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

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">div#ui-datepicker-div.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all{z-index: 2222 !important;}</style>

Step 2:

Add this code inside the before  tag of your custom code:

<script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
$('#datepicker').datepicker();
</script>

Step 3:

Firstly add an input field -

Capture

Secondly give it an ID of ‘datepicker’

Capture

Need more than one?

Edit: if you’d like to have more than one datepicker on the same page just swap the #ID in the custom code for a .class and give each input an individual ID and you should be able to have more than one. For example this is how two datepickers would look in your custom code:

Then give the input field a CSS class of ‘datepicker’ with an ID of for example datepicker_1. Then if you want to add another give it the same class name and a new unique ID for example datepicker_2.

ABOUT THE AUTHOR
Flowbase

Flowbase is the leading company for Webflow resources. We provide customers a collection of premium and free resources that help them build better products with Webflow.

Enjoyed this read?

Stay up to date with the latest video business news, strategies, and insights sent straight to your inbox!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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.