Date-time picker element

The Date-time picker provides an intuitive way for users to select dates without worrying about format errors (e.g., DD/MM vs MM/DD). It is essential for scheduling forms, birthday inputs, or filtering records by date range.

This page covers how to collect dates, times, or timestamps with a user-friendly calendar interface.

Overview

Rather than typing dates manually as text strings, users can select dates from a calendar interface. You can configure the element to show or hide the time field and set the date and time format.

  • Functionality: Opens a calendar popup for date selection and a scrollable list for time selection.
  • Formats: Supports US (MM/DD), European (DD/MM), and ISO (YYYY-MM-DD) formats.
  • Time Support: You can toggle time selection on or off and choose between 12-hour (AM/PM) or 24-hour clocks.
  • Styling: Visuals for the Label and Input Box are managed via Theme Overrides.

Add a date-time picker

  1. Open the Elements panel (click the + icon).
  2. Select Date-time picker.
  3. Drag and drop the element onto your canvas (typically inside a Form Container).

Configuration

Click the element to open the General properties tab.

1. Content & Logic

  • Label: The descriptive text displayed above the field (e.g., “Appointment Date”).
  • Default Value: A date that appears automatically when the page loads.
    • Dynamic: Click the Connect Data icon to bind this to a Data Source. Useful for “Reschedule” forms where you want to show the current appointment time.
  • Required: If checked, the user cannot submit the form without selecting a value.

2. Formatting

Control how the date and time look to the user.

  • Date Format:
    • European: 25/04/2024 (DD/MM/YYYY)
    • US: 04/25/2024 (MM/DD/YYYY)
    • ISO: 2024-04-25 (YYYY-MM-DD)
  • Include Time: Check this box to allow time selection.
  • Time Format: (Visible only if “Include Time” is checked)
    • 12 Hour: 01:30 PM
    • 24 Hour: 13:30

Styling and Theme Overrides

By default, the picker inherits styles from your Global Theme. To customize the specific look of this element, use Theme Overrides.

  1. In the General tab, look for the Style/Settings icon (slider icon) next to the Label or Input sections.
  2. Clicking this opens the styling menu for that specific part.

Styling the Label

  • Typography: Font family, weight, size, and color.
  • Alignment: Left, Center, or Right align the label text.

Styling the Input Box

  • Text: Font style for the date inside the box.
  • Background & Borders: Fill color, border width, color, and radius.
  • Calendar Icon: The icon usually inherits the text color; check overrides for specific icon styling options if available.

Frequently asked questions (FAQ)

How is the date saved?

Regardless of the display format (US/EU), Baserow typically sends the date to the backend in standard ISO format (YYYY-MM-DD) or UTC timestamps to ensure data consistency.

Can I restrict the date range?

Currently, the date picker allows selection of any valid date. To restrict range (e.g., “Future dates only”), you would typically handle this validation on the backend or via form submission logic.

Why don’t I see the time options?

Ensure the Include Time checkbox is selected in the element configuration. Without this, the element functions as a strict Date picker.

Related content

Still need help? If you’re looking for something else, please feel free to make recommendations or ask us questions; we’re ready to assist you.