Bubble provides a built-in Date/Time Picker element that you can configure for date-only, time-only, or date-and-time selection. Customize it by setting date ranges, blocked dates, time intervals, default values, and styling. Use the Conditional tab for dynamic constraints like blocking past dates or limiting to business hours.
Create a Date Picker in Bubble
This tutorial covers configuring Bubble's Date/Time Picker element for various use cases — appointment booking, event scheduling, and form inputs.
Prerequisites
- A Bubble account with an active app
- Basic familiarity with the Design tab
Step-by-step guide
Add a Date/Time Picker Element
Add a Date/Time Picker Element
In the Design tab, click '+' and search for 'Date/Time Picker'. Drag it onto your page. In the Property Editor, choose the input type: Date (calendar only), Date & Time, or Time only. Set the date format (e.g., MM/DD/YYYY or DD/MM/YYYY).
Expected result: A date picker element is on the page with your chosen format.
Set Date Constraints
Set Date Constraints
Set 'Minimum date' to block past dates (e.g., Current date/time for no past dates). Set 'Maximum date' to limit how far ahead users can select. For specific blocked dates, use conditional formatting or a custom solution with a list of unavailable dates.
Expected result: Users can only select dates within the allowed range.
Configure Time Intervals
Configure Time Intervals
If using Date & Time mode, set the time interval (15 min, 30 min, 1 hour). The picker shows time slots at the specified intervals. Set business hours by combining minimum/maximum time constraints.
Expected result: Time selection shows intervals matching your business requirements.
Style the Date Picker
Style the Date Picker
Use Styles tab or element-level styling for font, colors, border, and padding. The calendar popup inherits the app's theme. For advanced styling, add custom CSS in the page header targeting the date picker's CSS classes.
Expected result: The date picker matches your app's visual design.
Use Date Picker Values in Workflows
Use Date Picker Values in Workflows
Reference the date picker in workflows: 'DatePicker's value' returns the selected date. Use it in Create/Update actions: event_date = DatePicker's value. Compare dates in conditions: 'DatePicker's value > Current date/time'. Format for display: DatePicker's value :formatted as 'MMMM D, YYYY'.
Expected result: Selected dates are saved to the database and displayed correctly.
Complete working example
1DATE PICKER CONFIGURATIONS:231. APPOINTMENT BOOKING4 Type: Date & Time5 Min date: Current date/time6 Max date: Current date/time +(months):37 Time interval: 30 minutes8 Min time: 9:00 AM9 Max time: 5:00 PM10112. BIRTH DATE12 Type: Date only13 Min date: 01/01/192014 Max date: Current date/time +(years):-13 (minimum age 13)15 Format: MM/DD/YYYY16173. EVENT DATE RANGE18 Two date pickers: Start Date and End Date19 End Date min = Start Date's value20 Validation: End Date > Start Date21224. DATE DISPLAY FORMATS:23 :formatted as MM/DD/YYYY → 03/28/202624 :formatted as MMMM D, YYYY → March 28, 202625 :formatted as relative → 2 days ago26 :formatted as ddd, MMM D → Sat, Mar 28Common mistakes when creating a datepicker in Bubble.io: Step-by-Step Guide
Why it's a problem: Not setting a minimum date for future-only selections
How to avoid: Set Minimum date to 'Current date/time' or 'Current date/time +(days):1' for tomorrow onwards.
Why it's a problem: Using the wrong date format for the audience
How to avoid: Set the date format in the picker's properties to match your target audience's convention.
Why it's a problem: Not accounting for time zones
How to avoid: Bubble stores all dates in UTC internally. Use ':format as' with timezone settings for display.
Best practices
- Set minimum and maximum dates to prevent invalid selections.
- Use appropriate time intervals for your use case (15 min for appointments, 1 hour for events).
- Match date format to your target audience's convention.
- Add a default value for common selections (e.g., today or tomorrow).
- Validate date picker values before form submission.
- Use ':formatted as relative' for user-friendly date display.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to configure a date picker in Bubble.io for appointment booking. It should only allow future dates within the next 3 months, show 30-minute time intervals between 9 AM and 5 PM, and block weekends. How do I set this up?
Add a Date/Time Picker for appointment booking. Set minimum date to today, maximum to 3 months out, time intervals of 30 minutes, and business hours 9 AM to 5 PM.
Frequently asked questions
Can I block specific dates (holidays, fully booked days)?
Bubble's native date picker does not support blocking specific dates. Use conditional validation in the workflow: if the selected date is in a 'blocked dates' list, show an error and prevent submission.
Can I display a calendar view instead of the picker dropdown?
Bubble's native Date/Time Picker is a dropdown. For a full calendar view, use the FullCalendar plugin or a custom HTML/JS solution.
How do I create a date range picker?
Use two Date/Time Pickers: start date and end date. Set end date's minimum to the start date picker's value to prevent invalid ranges.
Can I change the first day of the week?
Bubble's date picker defaults to Sunday as the first day. This can be changed through locale settings or custom CSS.
How do I pre-fill the date picker with an existing value?
Set the 'Initial content' property to the existing date value (e.g., Current Page Event's date). For complex date handling, RapidDev can build custom calendar and scheduling solutions.
Does the date picker work on mobile?
Yes. On mobile, some browsers show their native date picker interface, which may look different from the desktop version.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation