Corfix Form Builder: Using the Date & Time Component.

1. Display Tab

The Display tab controls the general appearance of the Date / Time Component.

• Label:

  • This is the visible title for your date/time field that users will see. It is a required field.

  • Example: "Date of Incident", "Start Time", "Completion Date & Time".

• Label Position:

  • Determines where the label is displayed relative to the input field (e.g., Top, Left, Right, Bottom).

  • Default: Top.

• Allow Manual Input:

  • If checked, users can type the date/time directly into the field, in addition to using the calendar/time picker.

• Placeholder:

  • Text that appears inside the input field before the user types anything. It's a hint to the user about the expected format.

  • Example: "MM/DD/YYYY HH:MM AM/PM".

• Description:

  • Provides additional explanatory text for the field, typically displayed below the input box.

  • Example: "Enter the exact date and time the event occurred."

• Tooltip:

  • Text that appears when the user hovers their mouse over the field. Useful for providing quick help or context.

• Custom CSS Class:

  • Allows advanced users to apply custom styling to the component using CSS classes.

• Hide Label:

  • If checked, the label for the component will not be displayed.

• Modal Edit:

  • (Details not fully visible in screenshot, but typically relates to editing in a pop-up modal window).

• Reportable:

  • If checked, the data from this field will be included in reports.

2. Date Tab

This tab contains specific settings related to the date input.

• Enable Date Input:

  • If checked, the date selection functionality (calendar picker) will be available.

• Disable weekends:

  • If checked, users will not be able to select Saturday or Sunday from the calendar.

• Disable weekdays:

  • If checked, users will not be able to select Monday through Friday from the calendar.

3. Time Tab

This tab contains specific settings related to the time input.

• Enable Time Input:

  • If checked, the time selection functionality (time picker) will be available.

• Hour Step Size:

  • Determines the increment for selecting hours (e.g., '1' for hourly increments, '2' for every two hours).

  • Default: 1.

• Minute Step Size:

  • Determines the increment for selecting minutes (e.g., '1' for every minute, '15' for quarter-hour increments).

  • Default: 1.

• 12 Hour Time (AM/PM):

  • If checked, the time picker will use a 12-hour format with AM/PM selectors. If unchecked, it will use a 24-hour format.

4. Data Tab

The Data tab manages the underlying data properties of the date/time field.

• Multiple Values:

  • If checked, allows the user to enter multiple date/time values for this field.

• Default Value:

  • The pre-filled date/time that appears in the input field when the form loads. Users can override this value. This is a static value.

• Default Date:

  • Allows setting a dynamic default date, often using a function like moment() to set the current date/time.

5. Validation Tab

The Validation tab defines rules to ensure the date/time entered by the user meets specific requirements.

• Required:

  • If checked, the user must enter a date/time in this field before submitting the form.

• Use calendar to set minDate:

  • Allows you to select a minimum date from a calendar, preventing users from selecting dates before this point.

• Use calendar to set maxDate:

  • Allows you to select a maximum date from a calendar, preventing users from selecting dates after this point.

6. Conditional Tab

The Conditional tab allows you to set up rules for when this Date / Time Component should be displayed or hidden based on the values of other components in the form.

• Simple:

  • This is typically a toggle or a dropdown to select between simple and advanced conditional logic.

• This component should Display:

  • Choose whether the component should "Show" or "Hide" (implied options) based on the condition.

• When the form component:

  • Select another component in your form whose value will trigger the condition.

• Has the value:

  • Specify the exact value that the selected form component must have for the condition to be met.

  Example: You could set up a rule so that a "Return Date" field only displays when "Is this a round trip?" checkbox is checked.

Preview Panel

The Preview panel on the right side of the dialog box shows you how the "Date / Time" input field will visually appear on your form. It typically includes a text input field and a calendar icon, giving you a real-time sense of the user's interaction.

Actions at the bottom of the dialog:

• Save: Saves all changes made to the Date / Time Component's settings.

• Cancel: Discards any unsaved changes and closes the dialog.

• Remove: Deletes the Date / Time Component from the form.

Best Practices for Date / Time Component:

• Be Specific with Label: Clearly state what date/time is needed (e.g., "Inspection Date", "Start Time").

• Enable Date/Time Input Appropriately: Only enable "Date Input" or "Time Input" if both are truly necessary. If only date is needed, disable time, and vice versa.

• Set Min/Max Dates for Control: Use minDate and maxDate in "Validation" to prevent illogical entries (e.g., future dates for past events, or dates outside a project window).

• Consider Default Date: For current events, set "Default Date" to moment() to automatically populate the current date/time, saving users time.

• Use Conditional Display: Hide date/time fields until they are relevant, simplifying the form (e.g., show "End Date" only after a "Start Date" is entered).