MARKETPLACE
PLUGINS
DATE PICKER W BLOCKED DAYS
Date picker w blocked days logo

Date picker w blocked days

Published July 2023
   •    Updated August 2026

Plugin details

This plugin allow your users to pick a date or multiple dates from a calendar with your blocked dates. Perfect for booking systems!

This plugin is based on https://github.com/longbill/jquery-date-range-picker


Checkout the editor to see how to make it work

🚀 Demo:
https://plugins-docs.bubbleapps.io/version-test/plugin-detail/date-picker-with-blocked-dates

🧩 Editor:
https://bubble.io/page?type=custom&name=date-picker-blocked-dates&id=plugins-docs

$6

One time  •  Or  $3/mo

1.5 stars   •   2 ratings
17 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Fishbowl logo
Fishbowl
Joined 2021   •   4 Plugins
View contributor profile

Instructions

1. Go to Settings Tab -> General -> General Appearance -> tick 'Expose the option to add an ID attribute to HTML elements' 2. Insert 'Date Picker' or 'Date Range Picker' from 'Input Forms'
3. Place any element that will serve as the 'button' to open calendar  (no workflow required)
4. Under step 4's element, set ID attribute(last option in your element window!)  to be the same as your 'Date Range Picker' element ID field.
5. Finally, add the Dates ranges (list) as a parameter to the 'Date Picker' element to block the dates.

Follow demo at: https://plugins-docs.bubbleapps.io/version-test/plugin-detail/date-picker-with-blocked-dates

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Event

Categories

This plugin can be found under the following categories:
Containers   •   Technical   •   Productivity   •   Customer Support   •   Media   •   Input Forms

Resources

Support contact
Documentation
Tutorial

Rating and reviews

Average rating (1.5)

Date Range Picker Does Not Open
August 5th, 2026
This plugin does not appear to be working correctly. After purchasing and installing the plugin, two elements are provided: Date Picker, which is used to select a single date Date Range Picker, which is used to select a range of multiple dates According to the installation guide, I placed the Date Range Picker element on the page, created a group, and assigned the same ID to both the element and the group. The calendar popup should open when the group is clicked, but nothing happens. I then tested the Date Picker in the same way. However, the calendar did not open for that element either. For a third test, I placed both the Date Picker and the Date Range Picker elements on the page, created one group, and assigned the same ID to all three elements. I also tested this with a text element and a button instead of a group, with the same result. In this configuration, clicking the group successfully opens the calendar for the Date Picker, meaning the calendar that allows only a single date to be selected. This workaround appears to solve the Date Picker issue, but I still cannot find any way to open the calendar for the Date Range Picker, which is the feature I actually need. Some users have suggested that this may be an initialization issue. Could you please inspect the plugin and confirm whether there is a bug or an additional setup requirement that is not included in the installation guide? Please also let me know the exact configuration required to open the Date Range Picker calendar.
Needs improvements
January 10th, 2024
Text on date picker only available in English. When used in a pop up date pick is appearing hidden behind the pop up
Bubble