Date Range

A specialized date range component that allows selection of start and end dates with predefined range options. Features quick selection options such as Today, Last 7 Days, Last 30 Days, and so on. It supports both multilingual localization and includes custom range validation. Perfect for date-based filtering and reporting interfaces.


Extends: fieldComponent


Fields

Name

Code

Data Type

Description

Minimum Allowed Value

minAllowedValue

text

Sets the earliest allowed date that can be selected in the range

Maximum Allowed Value

maxAllowedValue

text

Sets the latest allowed date that can be selected in the range

Range Preset

rangePreset

text

Predefined range options (today, next7Days, last7Days, last15Days, last30Days, last60Days, last90Days, last1Year)

Custom Validation Script

customValidationScript

text

A custom JavaScript function for additional date range validation rules

Custom Validation Message

customValidationMessage

multi-locale

The error message shown when custom date range validation fails (Multi-lingual)

Unique

unique

boolean

When true, ensures the selected date range doesn't duplicate existing ranges in the system

Methods

Name

Description

getDefaultRangePreset

Returns the default range preset when no preset is explicitly selected

getRange

Calculates the start and end dates for a given range preset

getRangePresets

Retrieves the available predefined range options

onRangeSelected

Handles the selection of a predefined range preset

setRangePreset

Sets the date range based on the selected preset

Events

Name

Description

onChange

Triggered when either the start or end date of the range is modified

onBlur

Triggered when the date range input loses focus

onFocus

Triggered when the date range input gains focus