Skip to main content

Date Range

What is the Form Date Range?​

The Date Range or Date Range picker is used, as the name suggests, as a date-range picking field, which can be styled to your preference. It renders two linked date fields (a start and an end) with a separator between them.

date-range.png date-rangepopup.png

Options​

Specifies where the date-picking pop-up appears relative to the input fields. The pop-up is always left-aligned to the fields. Values: Bottom (default), Top.

Setting Mock Field and Own Value​

The Date Range picker exports the mock field only; it does not set a separate own value. The exported value is an object holding the two selected dates:

{ from: <start date>, to: <end date> }

Each date is a string in the configured date format. The export only runs in the displayer; in the editor it is skipped. This happens:

  • When the Date Range picker is rendered (the stored value from the datasource, or today's date for both fields when Set today as default is enabled).
  • When either field loses focus (blur), for example after a date is selected.
  • When an external message tells it to.

Validation​

The Date Range picker doesn't validate itself.

Sensor Events​

The Date Range picker doesn't validate, so it never emits a {FORM-NAME}-valid sensor event. Whenever the value is exported it triggers a value sensor event named after the field ({FORM-NAME}) carrying the { from, to } object, unless the export was requested silently (by a Reset or Clear command).

External Messages​

The Date Range picker listens to all the basic messages.

  • Set Form: Takes the message's value parameter (which must be a string) and splits it on a semicolon (;) into two parts. The first part is set as the start date and the second as the end date, then the mock is updated. Format: START;END, where each side matches the configured date format (for example 01/15/2026;01/20/2026). If the values do not match the format, setting the range can produce an undesired outcome.
  • Reset Form: Resets both the start and end fields to today's date and updates the mock.
  • Clear Form: Clears both fields to empty and updates the mock.

When the framework requests a Reset or Clear silently, no value sensor event is fired.

Value from Datasource​

The Date Range picker does not bind an external input datasource to generate its content. When the widget is connected to a form output datasource that already holds a value for this field, that value (a { from, to } object) is loaded as the initial range on render. If no stored value exists and Set today as default is enabled, both fields are preset to today's date instead.

Last updated on