Date
The Date widget is used to capture a specific date input from the user through a calendar-style picker. It ensures accurate and properly formatted date selection, improving data consistency and user interaction in forms and applications.
Common Use Cases
Selecting a user's date of birth in registration forms
Choosing booking or reservation dates
Setting deadlines or due dates for tasks and events
Widget Properties
Title:
The Title property defines the label displayed above or beside the date picker. It guides the user by indicating what the selected date represents, such as "Date of Birth" or "Select Appointment Date."
Select Date Format
The Select Date Format property allows you to choose how the date appears in the widget. It controls the display format, such as DD/MM/YYYY
, MM-DD-YYYY
, or YYYY-MM-DD
, ensuring the date matches regional or application-specific standards.
Step-by-Step Guide to Use the Date Widget
Step 1: Add the Widget:
Open the Widget Panel on the left, go to the Field & Headers section, and pick & drop the Date Widget onto your page.

Step 2: Set Title and Date Format
Click on the widget to open its properties.
Enter a Title (e.g., “Select Date of Birth”) to indicate what the date is for.
Choose a Date Format (e.g.,
DD/MM/YYYY
,MM-DD-YYYY
) to control how the date is displayed.

Step 3: Configure Main Settings
Click the Date widget to access the Panel Tab. Set its label style, size, and alignment. You can also add an icon or change the Colors of the date on your app’s theme.
Step 4: Define the Rules & Test the Date
Click the Run/Preview icon to test the date picker. Make sure it opens the calendar correctly and reflects the selected format when a date is chosen.

Last updated