How I Built a Custom Date Picker Inside Webflow for a Rental Platform

This is some text inside of a div block.

Have an idea? Let’s build it.

No third-party widgets. No code-heavy solutions. Just a clean user experience and smooth rentals.

If you’ve ever tried to build a rental platform in Webflow, whether it’s for real estate, equipment, or events, you’ve probably come across one big challenge:

“How do I let users choose a start and end date without leaving Webflow?”

‍

Webflow doesn’t include a built-in calendar or date range picker like Airbnb or Booking.com. But that didn’t stop me.

In this post, I’ll show you how I built a fully functional, custom date picker inside Webflow, ideal for rental platforms that need a smooth, modern date selection without leaving the Webflow ecosystem.

‍

What I needed?

I was building a rental website where users had to:

Select a start date and an end date
See the dates styled to match the site design
Submit those dates via a pricing or booking form
Keep it responsive and easy to use on mobile devices

And I didn’t want to rely on expensive third-party integrations or code-heavy JavaScript libraries that broke Webflow’s native flow.

‍

Tools I Used

Webflow Forms
Flatpickr.js – A Lightweight and Customizable JavaScript Date Picker
Embedding Custom Code
Webflow CMS (Optional) – For Dynamic Rentals or Blackout Dates

‍

How I Made It?

Step 1: Add Two Input Fields to Webflow

In Webflow Designer:

Add a Form Block
Add two input fields:
One for the start date
One for the end date

Give each input a unique ID:

start-date
end-date

This allows the JavaScript to target the date picker fields.

‍

Step 2: Add Flatpickr to the page

Go to Page Settings (or Project Settings if it's at the page-wide level)

In the area Before the </body> tag, paste this:

‍

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
flatpickr("#start-date", {
dateFormat: "Y-m-d",
minDate: "today",
onChange: function(selectedDates, dateStr, instance) {// Automatically set the end date to match the start date
endPicker.set("minDate", dateStr);
}
});
const endPicker = flatpickr("#end-date", {
dateFormat: "Y-m-d",
minDate: "today"
});
});
</script>

‍

#rental-date refers to the ID I gave my input field in Webflow
I used minDate: "today" to prevent past bookings
disable lets me block booked dates (which I’ll later automate with a CMS)
The onChange function saves the picked date into a hidden field

‍

Step 3: Styling the Date Picker

Although Flatpickr comes with default styles, I wanted a unique look.
I added a CSS embed with custom colors and fonts to match the rest of the site.

<style>
.flatpickr-calendar {
font-family: 'Inter', sans-serif;
border-radius: 8px;
}
.flatpickr-day.selected {
background: #2B6CB0;
color: white;
}
</style>

‍

Step 4: Making It Dynamic with Webflow CMS

To disable dates dynamically based on availability, I connected the date picker to Webflow’s CMS via JavaScript.
I pulled booked dates from a Bookings collection and passed them into the disable array.

This requires exporting your CMS data as JSON or using Webflow’s API - a topic I’ll cover in another post.

‍

The final result was a custom, branded date picker, fully responsive, integrated with Webflow forms, and tailored for the rental platform’s needs.

Users can now easily pick dates, avoid selecting unavailable ones, and have a smooth booking experience -all inside Webflow.

‍

If you’re building a rental site on Webflow, I highly recommend experimenting with custom scripts like Flatpickr. With a little custom code, you can overcome most Webflow limitations and create a UX that feels premium and reliable.

Back to blog page