Integrating Flatpickr.js (a flexible, third-party datepicker) into your Webflow Project

Brought to you by The Visual Developers Podcast | Clone This!

Intro + Required Elements
Simple Date Picker
Date Picker with Time
Human-friendly Dates (Alt Inputs)
Setting a Default Date
Setting a Minimum or Maximum Date
Disabling a Specific Date
Disabling a Date Range
Selecting Multiple Dates
Selecting a Date Range
Showing Week Numbers
Force Calendar Open on Page Load
Using Javascript to Open/Close/Clear the Calendar

Disabling a Date Range

You can disable specific dates by passing in the "disable" property.

In this case, I've disabled the October 1, 2019 to November 15, 2019 AND November 25, 2019 - November 29, 2019. I've also set the default date to October 1, 2019 for those coming to this tutorial in 2020 on, which is why the date is pre-filled.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.