Skip to main content

Date-Range

The date-range field allows users to select a start and end date, typically used for scheduling or booking purposes.

Example

fields:
  booking_dates:
    type: date-range
    label:
      en: Select your booking dates
      de: Wählen Sie Ihre Buchungsdaten
    min: today
    max: +6months
    required: true

Field Properties

Name Type Default Description
aria string –

Optional aria label for better accessibility.
autofocus bool false

Set autofocus on field.
error string | array –

Costum error message for translation or customization.
help string | array –

Optional help text below the field
label string | array –

The field label can be set as string or associative array with translations
max string –

Defines the earliest selectable date. Accepts specific dates (YYYY-MM-DD), relative values (+Xmonths), or dynamic values like today.
min string –

Defines the latest selectable date. Accepts specific dates (YYYY-MM-DD), relative values (+Xmonths), or dynamic values.
required bool –

Defines whether the field is mandatory for form submission.
title string | array –

Tooltip displayed when the user hovers over the field (supports multilingual configurations).
width string 1/1

The width of the field in the 12 columns field grid.

Validation Logic

The date-range field automatically enforces validation based on the following rules:

  • Valid Dates: Both the start and end dates must be valid. Invalid dates will trigger an error.
  • Date Order: The start date must precede the end date. If the start date is after the end date, an error will be raised.
  • Minimum Date min: If a min value is defined, the start date cannot be earlier than the specified date.
  • Maximum Date max: If a max value is defined, the end date cannot be later than the specified date.

By defining min and max values in the field configuration, you can ensure that the selected dates fall within the desired range.

This logic is automatically applied, so there is no need to define a separate validate property for date-range fields. The validation messages can be customized in the language files to suit your application’s needs.