Kuika's Date Range element is a component that allows users to select start and end dates simultaneously. This feature provides a reliable solution wherever a date range is needed, such as in reservation systems, project planning, and reporting screens.

The Date Range element is supported in both web and mobile applications.

Areas of Use

• Date range selection on hotel reservation or flight search screens,
• Task start and end dates in project planning,
• Filtering on reporting screens (e.g., between 09/01/2025 and 09/07/2025),
• Campaign and discount validity periods, etc.

Flight Period Selection Use Case

1. Static Use Case – Fixed Date Range

In an airline ticket reservation application, users need to see data for a specific date range. In static use, the date range is fixed and cannot be changed by the user.

Using the Features

• Start Value → 2023-11-15
• End Value → 2023-12-08
• Start Date Placeholder → “Select Start Date”
• End Date Placeholder → “Select End Date”
• Format → DD/MM/YYYY → 11/15/2023 – 12/08/2023
• AllowClear → The user can clear the selections if they wish

When the Scenario Step is Complete

• A fixed date range is assigned to the user.
• The dates appear on the screen in the formatted manner.
• If desired, the selection can be cleared with the (X) button.
• The system only retrieves data for this fixed range.

Dynamic Usage Scenario – Reporting Date Range

In a financial reporting application, the user filters their reports by selecting a date range. The dates are linked to the data source.

Connecting the Data Source

• Go to the Datasources module.
• Then click the + icon next to the Tables heading and name the table “Reports”.
• Create the following table.

• Then click SQL Actions and name the action “Reports”. You can also create it with C#.
• Enter the following SQL command.

SELECTReportName,StartDate,EndDate,TotalRevenue,TotalExpenseFROM ReportsWHERE StartDate >= ‘2025-09-01’ AND EndDate <= ‘2025-09-30’ORDER BY StartDate ASC;

UI Design Module operations

• Click the Add Action button on the right side of the application screen.
• Then select Custom > Reports.

Using Properties

• Start Value → Reports.StartDate (linked from Symbol Picker)
• End Value → Reports.EndDate (linked from Symbol Picker)
• Start Date Placeholder → “Select Start Date”
• End Date Placeholder → “Select End Date”
• Format → DD/MM/YYYY
• AllowClear → User can clear selection

When Scenario Step is Complete

• The user selects the start and end dates from the calendar.
• The selected range is displayed on the screen in the formatted manner.
• The user can clear the range using the (X) button if desired.
• The dates are saved in the Reports.StartDate and Reports.EndDate fields.
• The system filters the reports according to this range.

Limitations

• Very wide date ranges may affect performance (e.g., when filtering across years).

Tips and Best Practices

• Add controls on Start Value and End Value to limit past dates.
• Always add placeholder text for user experience.
• In reporting scenarios, you can set the default date range to this week or last 30 days.