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