Kuika's Date element is a basic input element that allows users to select a date or enter a date manually. It is one of the most frequently used elements in form structures, filtering screens, and reservation and planning processes. Users can quickly and accurately select a date using the date picker.
The Date element enables both simple date selection and controlled input supported by validation rules. This allows incorrect formats, invalid dates, or selections outside specific ranges to be blocked or redirected for the user.
The Date element is supported in web and mobile applications.
1.1. Common Use Cases
Date entry in forms: Provides controlled and error-free input in fields such as date of birth, expiration date, invoice date, appointment date.
Filtering screens: Used in scenarios where users need to filter data lists by a specific date. E.g.: Order date, transaction date, payment date filters.
Reservation and planning processes: Can be used for date selection in hotel, gym, restaurant, transportation, or appointment reservations.
Processes requiring date validation: Reduces the error rate with rules such as setting minimum/maximum date ranges and preventing the selection of past dates.
Event, task, and project management: Used in fields such as task start/end date, project sprint date, event days.
2. Key Features
Easy date selection (Date Picker) support: Users can enter dates manually or make quick selections via the drop-down date picker.
Date validation support: Invalid dates can be prevented by setting minimum and maximum date limits. E.g.: “Dates before today cannot be selected.”
Dynamic value binding: The selected date can be sent as a parameter to other actions or used to trigger other elements on the page.
Format compatibility: Date values are processed in the YYYY-MM-DD format within the application. The display format can be customized for the user.
Time-independent usage (date only): The element represents only the day. It does not contain time information. (The Time or DateTime element should be preferred for time selection.)
Null value support: Optional date fields in forms can be left blank if necessary, and validation rules can be configured accordingly.
2.1. Date Element Properties
All settings for the Date element are configured via the Properties panel on the right. Each property is explained in detail below:
Value: The Date element can take a static date value or be assigned dynamic values using the Symbol Picker.
Placeholder: You can add a helpful placeholder text to guide the user. For example, “Select Date”.
Allow Clear: The Delete (X) icon appears in the right corner so users can clear the date value they entered with a single click.
Format: You can select the date format from the drop-down menu in the Properties panel:
DD/MM/YYYY: Day/Month/Year (e.g., 10/20/2023)
MM/DD/YYYY: Month/Day/Year (e.g., 10/20/2023)
YYYY/MM/DD: Year/Month/Day (e.g., 2023/10/20)
DMY: Displays the day, month, and year in order, either as abbreviations or as the full date. (For example, “October 20, 2023”)
You can use options such as DD/MM/YYYY or MM/DD/YYYY, depending on your needs.
Disable Before Date: Prevents dates before a specific date from being selected. You can enter a static date or use dynamic values. For example, only future dates can be selected for a product delivery.
Disabled Days: Disables specific days from being selected. For example, you can make past dates or holidays unselectable. (This feature is only available in web applications.)
Return Display Value (Web only): Determines whether the date value selected by the user is returned in a formatted manner (as it appears on the screen) or as a raw value. Not available on mobile.
2.2. Actions That Can Be Added to Elements
The Date element is an input field that works with user interactions and only supports the onChange trigger. This event fires when the user selects a date, changes it, or clears the field. To add an action, select the Date element and use the ADD ACTION → onChange trigger in the right panel.
Below are the supported events and usage scenarios for the Date element:
onChange
This action is triggered when the user makes a change in the date field. It works in all of the following cases:
When a new date is selected
When the selected date is changed
When the date is cleared if AllowClear is enabled
Usage Scenarios:
Fill in other fields in the form based on the selected date. E.g.: Automatically set the end date based on the selected start date
Perform date-based filtering. E.g.: Reload a list based on the selected date
Make an API call. E.g.: Get available appointments on the selected date
Trigger validation. E.g.: Prevent the user from selecting a past date
Initiate calculation operations. Example: Calculate the number of days between the “Start Date” and “End Date”.
3. How to Use the Date Element?
In this section, we will cover the end-to-end use of the Date element through example scenarios.
Scenario: Creating a Reminder
In a reminder or daily note application, users want to record a short description for a specific date. The Date element is used in this scenario to select which day the note belongs to.
In the scenario:
Users can easily track their date-based records on a single screen.
Thanks to the Date element, time information is obtained clearly and accurately.
With a simple form + list structure, entry and viewing operations are completed on a single page.
Step 1 - Creating the Data Source
Creating a table in the DataSources module:
Go to the Datasources module.
Then go to the Tables tab.
Create a new table named “NoteDateRecords”.
The table structure to be set up is as follows:
Important Field Names:
NoteText: Holds the note or short description entered by the user. In a list or table structure, it displays the content of the record to the user in a readable format.
NoteDate: Represents the date information associated with the note. This field, selected via the Date element, indicates which day the record belongs to and enables date-based tracking.
Step 2 - Define the Necessary Actions
To display and save data in the interface:
Three actions will be used in this scenario.
The Save Record ready-made system action provided by Kuika is used for record operations.
The data listing process is performed through a custom action created with predefined SQL queries.
Add a new action from the Actions > New SQL Action tab in the Datasources module.
Action Listing Sample Data (GetNotes): The Select action is provided ready-made in the SQL Action section under the NoteDateRecords table in the left panel. Click the Add Select Query option to automatically generate the query. Name the created action GetNotes and save it.
Step 3 - Add Initial Action
Initially on the home page:
Open the UI Design module.
Add the Add Action > Initial Action > Custom > Managed Db > GetNotes action to the page.
Step 4 - Add Element and Edit Style
Drag and drop the Elements > Display > Label element onto the page.
Enter “Create New Reminder” in the Label > Properties > Value field.
Set the text style to Label > Styling > Text > Heading 2.
Drag and drop the Elements > Text Input > TextInput element under the Label element.
Drag and drop the Elements > Date and Time Input > Date element below the Text Input element.
In the Date element, add Date > Properties > PlaceHolder >“Enter Reminder Date”.
To prevent past dates from being added, set Date > Properties > DisableBeforeDate > Default > Now.
Drag and drop the Elements > Navigation > Button element under the Date element to save the entries.
Add the text “Save” to the Button > Properties > Label field.
Add the Elements > Display > Label element under the Button element.
Enter the text “My Reminders” in the Label > Properties > Value field.
Set the text style to Label > Styling > Text > Heading 2.
To dynamically display reminders, drag and drop the Elements > Data > Table element.
In the Table element, define the Table > Properties > DataSource > GetNotes action.
Drag and drop the Elements > Date and Time Input > Date element into the Table Column.
Step 5 - Configuring Element Settings
Connecting the initial action added to the page to the elements and adding the save action:
Click on the Button element. Click on the Button > Add Action > onClick > ManagedDb > Save Record action.
Define the Save Record NoteDate parameter as Components > Date1 > value.
Set the NoteText parameter as Components > TextInput1 > value.
Define the Id field as Default > New Guid.
Add the Button > onClick > Custom > Managed DB > GetNotes action to update the list after saving.
Click on the Label element within the Table element. Define Label > Properties > Value > Field to display as > NoteText.
Click on the Date element. Set Date > Properties > Value > Field to display > NoteDate.
To make the reminder time in the table read-only, set DateTime > Properties > Editability > Disabled.
Preview:
When the application is tested, the user creates a record by entering the reminder description in the Text Input field and the reminder date in the Date field.
The saved reminder is listed in the table on a single page. Previously added reminders are also displayed in the same table, allowing easy tracking of past records.
4. Common Properties
Some fields on the Date element are used in common across all UI elements. Therefore, detailed descriptions of the following properties are available in the relevant general guide pages:
Use a consistent date format. Choose a format that is compatible with the backend, database, and other UI elements (e.g., YYYY-MM-DD). Different formats can lead to validation errors.
Prevent incorrect selections with Disable Before Date. If past dates are not valid in the form, it is best practice to restrict the selection from the outset rather than warning the user.
Choose meaningful placeholder text. A short text that indicates to the user what date format is expected reduces selection errors (e.g., “Select Delivery Date”).
Trigger validations on change. Updating other fields in the form or redirecting the user as soon as the date changes provides a more fluid experience.
Use dynamic date constraints.
6. Limitations
The Disabled Days feature is only supported on the web. The feature to disable specific days does not work in mobile applications.
It does not contain time data. The Date element only selects the day; if time information is required, DateTime or DateTimeRange should be used.
