Kuika's Date element is an input element that makes it easy for users to select dates. Users can enter dates manually or select them from a calendar. It enables you to collect reliable data in forms and processes by adding date-based validations and restrictions.

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

Areas of Use

• Reservation and appointment systems,
• Selecting birth dates or delivery dates in forms,
• Setting dates on invoice or order creation screens,
• Project planning and scheduling applications, etc.

Appointment Date Selection

Static Usage Scenario – Appointment Date

In a travel reservation application, users should only be able to select future dates. The Date element presents the user with a date picker, and the selected date is recorded for the reservation.

Data Source Binding

No SQL or table is required for static usage. The date is assigned directly through the element.

• The Value field is assigned today's date.
• Past dates are disabled with the DisableBeforeDate property.
• The Placeholder is set to “Select Appointment Date”.
• If AllowClear is enabled, the user can reset their selection.

Using Properties in a Scenario Context

• Value → Today's date is assigned as the start date.
• Placeholder → “Select Appointment Date” guides the user.
• AllowClear → Allows the selection to be cleared with a single click.
• Format → Set to DD/MM/YYYY.
• DisableBeforeDate → Past dates are disabled.
• DisabledDays → Holidays can be disabled.
• Return Display Value (Web only) → The date returns in the format displayed on the screen.

When the Scenario Step is Complete

• The user can only select future dates.
• The selected date is displayed on the screen in the specified format.
• The user can clear the date if desired.
• The selected date is transferred to the reservation process.

Dynamic Usage Scenario – Order Delivery Date

Delivery dates for orders are managed in an e-commerce application. When the user creates a new order, they select the delivery date, and the system records this date in the data 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”.
• Enter the following SQL command.

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

• Alternatively, you can also create the table using C#.

UI Design Module operations

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

Using Properties in the Scenario Context

• Value → Connects to the Orders.DeliveryDate field via the Symbol Picker.
• Placeholder → “Select Delivery Date”.
• AllowClear → The user can clear it if they want.
• Format → DD/MM/YYYY.
• DisableBeforeDate → Dates before today are disabled.
• DisabledDays → Holidays or days when deliveries are not made can be disabled.

When the Scenario Step is Complete

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

Limitations

• Disabled Days and Return Display Value only work in web applications.

Tips and Best Practices

• Always add a Placeholder for user experience.
• Use the Disable Before Date feature to prevent selection of past dates.
• Disable special dates such as holidays or maintenance days using Disabled Days.
• In international projects, set the date format according to regional standards.