Getting Started 1. Add the C - Date Picker element to your page.
2. Resize it to fit your layout (minimum recommended width: 220px, height: 40–48px).
3. Set your Picker Mode: date for full date selection, month_year for month+year, month for month-only, or year for year-only.
4. Set Mode to single (default) or range (for a start/end date range).

Displaying the Selected Value
Use the element's exposed states in your Bubble text elements or workflows:
- Selected Date — the selected date object (single mode)
- Formatted Value — the date as a formatted string (e.g. 04/10/2026)
- Start Date / End Date — range mode dates
- Formatted Start Date / Formatted End Date — formatted range strings
- Unix Timestamp (ms) — milliseconds since epoch, useful for API calls
- Selected Month / Selected Year — for month/year picker modes
- Selected Time — time string when time picker is enabled
- Days In Range — list of all dates between start and end (range mode)

Using the Time Picker
1. Set Picker Mode to date.
2. Enable Enable Time Picker.
3. Choose Time Format: 12h (with AM/PM) or 24h.
4. After opening the picker, the time drum rolls appear below the calendar.
5. In single mode, read Selected Time. In range mode, read Selected Start Time and Selected End Time.

Date Range with Presets
1. Set Mode to range.
2. Enable Show Preset Ranges to show a sidebar with shortcuts (Today, Last 7 days, This Month, etc.).
3. For a dual-month view, set Calendar Months Shown to 2.

Validation
1. Check Required in the properties panel.
2. Set a custom Error Message and Error Color.
3. In your submit workflow, add a Validate action on the element before saving.
4. Use the Is Valid state in workflow conditions to block submission when the field is empty.

Programmatic Actions
- Open Picker: Opens the calendar popup
- Close Picker: Closes the calendar popup
- Clear Selection: Resets to placeholder state
- Set Date: Pre-sets the selected date
- Set Range: Pre-sets start and end dates
- Validate: Triggers validation and shows/hides error

Localization
- Choose a Locale from the dropdown (en-US, pt-BR, es-ES, fr-FR, de-DE, it-IT, ja-JP, zh-CN).
- Enable Auto Week Start (from Locale) to automatically set Sunday/Monday as first day based on locale.
- The Today button label also adapts to the selected locale.

Theming & Dark Mode
- Use the Color Scheme property: light, dark, or auto (follows system preference).
- All colors (accent, background, text, border, error) are fully customizable via the Color pickers.
- The Font picker in Bubble's style panel controls the typography inside the calendar.