Adding a date picker to your forms will help users use them more easily. Using a date picker, your visitors can select a date easily on a calendar, making form entries right and accurate. For any form requiring a date such as a booking or registration, this small widget can greatly improve how your users work with the interface. No coding is needed; Webflow provides input for dates and with a few quick steps, you can adjust it to match your requirements.
Instructions
1. Add the custom code into your page.
Go to the settings of your project or page and paste the custom JavaScript into the space before the </body> tag, as well as into the <head> area.
We included some basic CSS properties so it’s easier for you to match the colors to your tastes.
I used the straightforward plugin made by Fengyuan Chen (Github) as the base for this project.
2. Add the js script & custom styles
Add this code inside the before </body> tag of your custom code:
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
<script>
$(document).ready(function () {
$('[data-toggle="datepicker"]').datepicker({
format: 'mm-dd-yyyy'
});
// Available date placeholders:
// Year: yyyy
// Month: mm
// Day: dd
if (window.innerWidth < 768) {
$('[data-toggle="datepicker"]').attr('readonly', 'readonly')
}
});
</script>
<!-- You can put your custom CSS attributes -->
<style>
/* You can apply your own color!
--main-light-color is the light grey,
--main-dark-color is the text
--main-active-color is the highlight
you can just add like red, or blue or any helx you like! */
:root {
--main-light-color: #f3f5fb;
--main-dark-color: #321f59;
--main-active-color: #642eff;
}
.datepicker-dropdown {
border-radius: 8px !important;
border: 0 !important;
-webkit-box-shadow: 0px 48px 88px rgba(23, 9, 54, 0.08);
box-shadow: 0px 48px 88px rgba(23, 9, 54, 0.08);
box-sizing: border-box;
}
.datepicker-panel>ul[data-view="week"]>li {
background-color: var(--main-light-color);
color: var(--main-dark-color);
font-weight: bold;
text-transform: uppercase;
margin: 0;
height: initial;
padding-top: 3px;
margin-bottom: 4px;
}
.datepicker-panel>ul[data-view="week"]>li:hover {
background-color: var(--main-light-color);
color: var(--main-dark-color);
border-radius: 0px;
}
.datepicker-panel>ul[data-view="week"] li:first-child {
border-radius: 20px 0 0 20px;
}
.datepicker-panel>ul[data-view="week"] li:last-child {
border-radius: 0 20px 20px 0;
}
.datepicker-top-left::before,
.datepicker-top-left::after {
display: none;
}
.datepicker-panel>ul>li.picked,
.datepicker-panel>ul>li.highlighted,
.datepicker-panel>ul>li.picked:hover {
color: var(--main-active-color);
background: var(--main-light-color);
border-radius: 8px;
font-style: normal;
font-weight: 500;
font-size: 14px;
}
li[data-view="month current"],
li[data-view="year current"] {
text-align: left;
color: var(--main-dark-color);
font-style: normal;
font-weight: 500;
font-size: 14px;
/* line-height: 24px; */
padding-left: 15px;
border-radius: 10px;
}
.datepicker-panel>ul>li:hover {
background: var(--main-light-color);
border-radius: 10px;
}
li[data-view="month current"],
li[data-view="year current"],
li[data-view="years current"] {
margin-bottom: 4px !important;
}
@media screen and (min-width: 768px) {
.datepicker-dropdown {
width: 364px;
padding: 12px;
}
.datepicker-panel>ul>li {
width: 48px;
height: 48px;
padding-top: 10px;
}
li[data-view="month next"],
li[data-view="year next"],
li[data-view="years next"] {
position: absolute;
right: 18px
}
li[data-view="month prev"],
li[data-view="year prev"],
li[data-view="years prev"] {
position: absolute;
right: 66px
}
ul[data-view="months"] li,
ul[data-view="years"] li {
padding-top: 0px;
width: 57px !important;
}
}
@media screen and (max-width: 768px) {
.datepicker-panel {
transform: scale(0.97);
}
}
</style>
3. Add an Input Field & Custom Attributes
The input field must be included in the section for your form. When you’ve added the input, go to the settings panel and choose the attribute.
4. Custom Attributes
It’s important to add the input field into the form section. Once you’re finished with the input, visit the settings panel and assign the attributes from there
- data-toggle - datepicker
- autocomplete - off
5. Publish & Test
All that’s left is for you to style the CSS if you are able to. You can only see this by going to your live site; it won’t show inside the design editor.
6. Update Colours & Date Format
It’s simple to edit the system colors by modifying the first sections of the styles.
--main-light-color: #f3f5fb;
-main-dark-color: #321f59;
--main-active-color: #642eff;
Conclusion
All in all, using a date picker in your Webflow form is a fast and helpful way to improve both how it works and for users. Someone using a booking, RSVP or schedule request form can pick dates effortlessly and accurately thanks to a date picker. Date fields are supported by Webflow, so you don’t have to work hard to start, but using custom code, you can customize them more. Easy-to-use forms do more than make your work look nicer—they also increase the chance that your users will finish what you need them to. It’s a minor update that can have a major effect on your site.
FAQ'S
How To Add A Date Picker To Your Webflow Form
Can I customize the look of the date picker?
How do I prevent users from selecting past dates?
Is the date picker mobile-friendly?
Can I use third-party date pickers in Webflow?
We make websites that bring joy and meet your goals.
We create digital experiences that not only capture the users but also empower businesses in a highly competitive world. We are dedicated towards developing creative solutions that will easily fuse creativity with functionality, with long-lasting effects.
