Kuika's Date Time element allows users to select both date and time information in a single field. This feature is ideal for appointment scheduling, delivery dates, meeting scheduling, and time-based reporting.

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

Areas of Use

• Meeting or appointment scheduling screens,
• Setting delivery dates and times,
• Report filtering (e.g., “04/24/2025 / 3:30 p.m.”),
• Reservation start and end times, etc.

Appointment Scheduling

1. Static Usage Scenario – Event Time

In an event planning application, users need to select the event start time. However, a fixed date and time can be assigned in the system.

Use of Features

• Value → 2023-10-28 13:09:14
• Placeholder → “Select Event Date and Time”
• AllowClear → User can clear if desired
• Format → DD/MM/YYYY HH:mm (e.g., 28/10/2023 13:09)
• DisableBeforeDate → Dates and times before today are disabled
• DisabledDays → Specific days can be disabled

When the Scenario Step is Completed

• The user sees the fixed date and time information.
• The date and time are displayed on the screen in the specified format.
• The system uses this date and time value in the process steps.

2. Dynamic Usage Scenario – Order Delivery Date and Time

In an e-commerce application, the delivery date and time of orders are managed. When the user creates a new order, they select the delivery date and time, and the system records this value in the table.

Connecting the Data Source

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

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

SELECTCustomerName,DeliveryDate,StatusFROM OrdersWHERE DeliveryDate >= GETDATE()ORDER BY DeliveryDate ASC;

UI Design Module operations

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

Using the Properties

• Value → Orders.DeliveryDate (connected via Symbol Picker)
• Placeholder → “Select Delivery Date and Time”
• AllowClear → User can clear selection
• Format → DD/MM/YYYY HH:mm
• DisableBeforeDate → Past dates and times cannot be selected
• DisabledDays → Holidays can be disabled

When the Scenario Step is Complete

• The user can only select future date-time combinations.
• The selected value is saved to the Orders.DeliveryDate field.
• It appears on the screen in the correct format.
• It is automatically used in the workflow (e.g., delivery planning).

Limitations

• Disable Before/After Time only works in web applications.
• On mobile, the device's native date-time picker screen opens.

Tips and Best Practices

• Disable past dates in scenarios such as appointment scheduling.
• Be sure to add placeholder text for user experience.
• Use dynamic restrictions to prevent performance issues for long-term selections (e.g., years).