Kuika's Date Time Range element allows users to select a specific date and time range. You can easily define the start and end times either manually or using the date-time picker. This element is ideal for reservation systems, shift planning, and report filtering.

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

Areas of Use

• Determining reservation start and end times,
• Work shift planning,
• Selecting date-time ranges for reporting,
• Setting delivery and service times, etc.

Fixed Reservation Range

Static Use Case

Check-in and check-out dates and times can be set as fixed values on a hotel reservation screen. In this case, the user sees the specified range but cannot change it.

Use of Features

• Start Value → 2023-11-01 11:00 (Default check-in date and time)
• End Value → 2023-11-11 12:00 (Default check-out date and time)
• Start Date Placeholder → “Check-in Date and Time”
• End Date Placeholder → “Exit Date and Time”
• Format → DD-MM-YYYY HH:mm (e.g., 11-11-2023 12:30)
• Allow Clear → The user can clear the entry/exit dates with a single click
• Disable Before Date → Entry dates prior to today cannot be selected

When the Scenario Step is Completed

• A fixed check-in/check-out range is assigned to the user.
• The date and time information is displayed on the screen in a formatted manner.
• The range can be reset by clicking the (X) icon.
• The system only uses this fixed range.

Dynamic Usage Scenario – Reservation Range

On a hotel reservation screen, the user selects the entry and exit dates and times themselves. The selected values are saved to the database and used in reporting/workflow processes.

Connecting the Data Source

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

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

SELECTCustomerName,StartDate,EndDate,RoomType,StatusFROM ReservationsWHERE StartDate >= GETDATE()ORDER BY StartDate ASC;

UI Design Module operations

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

Using Properties

• Start Value → Reservations.StartDate (via Symbol Picker)
• End Value → Reservations.EndDate (via Symbol Picker)
• Start Date Placeholder → “Check-in Date and Time”
• End Date Placeholder → “Check-out Date and Time”
• Format → DD-MM-YYYY HH:mm
• Allow Clear → User can clear selections
• Disable Before Date → Past dates are disabled

When the Scenario Step is Complete

• The user selects the check-in and check-out dates (including time) from the calendar.
• Past dates and times cannot be selected.
• The selected range is displayed on the screen in the specified format.
• If desired, the user can clear their selections by clicking the (X) icon.
• The system saves the selected date-time range to the Reservations.StartDate and Reservations.EndDate fields.
• These values are automatically used in workflows (e.g., reservation confirmation, room planning).

Limitations

• Disable Before/After Time features only work in web applications.
• On mobile devices, the selection is made using the device's native date-time picker interface.

Tips and Best Practices

• Disable past dates in reservation or planning scenarios.
• Be sure to add placeholder text for user experience.
• Disable unnecessary second increments for performance in range selection.