# How to create a datepicker in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 10-15 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- A Bubble account with an active app
- Basic familiarity with the Design tab

## Step-by-step guide

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `Workflow summary`

```text
DATE PICKER CONFIGURATIONS:

1. APPOINTMENT BOOKING
   Type: Date & Time
   Min date: Current date/time
   Max date: Current date/time +(months):3
   Time interval: 30 minutes
   Min time: 9:00 AM
   Max time: 5:00 PM

2. BIRTH DATE
   Type: Date only
   Min date: 01/01/1920
   Max date: Current date/time +(years):-13 (minimum age 13)
   Format: MM/DD/YYYY

3. EVENT DATE RANGE
   Two date pickers: Start Date and End Date
   End Date min = Start Date's value
   Validation: End Date > Start Date

4. DATE DISPLAY FORMATS:
   :formatted as MM/DD/YYYY → 03/28/2026
   :formatted as MMMM D, YYYY → March 28, 2026
   :formatted as relative → 2 days ago
   :formatted as ddd, MMM D → Sat, Mar 28
```

## Common mistakes

- **Not setting a minimum date for future-only selections** — Users can accidentally select past dates for appointments or events. Fix: Set Minimum date to 'Current date/time' or 'Current date/time +(days):1' for tomorrow onwards.
- **Using the wrong date format for the audience** — US uses MM/DD/YYYY, Europe uses DD/MM/YYYY. The wrong format confuses users. Fix: Set the date format in the picker's properties to match your target audience's convention.
- **Not accounting for time zones** — Dates stored without timezone awareness can show differently to users in different locations. Fix: 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.

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-a-datepicker-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-a-datepicker-in-bubble