Time Widget

The Time widget allows users to select and input time values with a user-friendly time picker interface. It supports both single time selection and time range selection with extensive customization options.

Overview​

The Time widget provides an intuitive way for users to select time values in your forms. It features a clean interface with optional arrow controls, customizable formatting, and support for time ranges. The widget includes built-in validation and can be easily integrated into forms with other components.

Configuration Options​

Global Settings​

Basic Configuration​

• Name: Display name for the widget field
• Variable/Model: The data model property where the selected time will be stored
• Default Value: Pre-selected time value when the widget loads

Time Type Settings​

• Is Range: Enable to allow selection of time ranges (start time and end time)
  • When enabled, users can select both a start and end time
  • When disabled, only a single time can be selected

Format and Display​

• Format: Time display format (e.g., "HH:mm", "HH:mm:ss")
  • HH:mm - 24-hour format with hours and minutes
  • HH:mm:ss - 24-hour format with hours, minutes, and seconds
  • hh:mm A - 12-hour format with AM/PM
• Arrow Control: Enable arrow controls for easier time selection
• Clearable: Allow users to clear the selected time

Placeholder Configuration​

• Placeholder: Text shown when no time is selected (for single time selection)
• Start Placeholder: Text shown for the start time field (when Is Range is enabled)
• End Placeholder: Text shown for the end time field (when Is Range is enabled)

Validation​

Screen-based Validation​

Configure different validation rules for different application screens:

• Available: Control if the widget appears on specific screens
• Visible: Control the visibility of the widget based on conditions
• Required: Make the time selection mandatory
• Disabled: Disable the widget to prevent user interaction

Validation Rules​

Add custom validation rules:

• Custom Rules: Define specific validation logic with custom error messages
• Built-in Validation: Automatic validation for required fields

Style Configuration​

Layout Options​

• Width: Set the widget width (e.g., "100%", "300px")
• Placeholder Styling: Customize placeholder text appearance
• Class Names: Add custom CSS classes for styling
• Dynamic Classes: Apply conditional CSS classes based on form state

Responsive Design​

• The widget automatically adapts to different screen sizes
• Supports responsive width settings

Events and Actions​

On Change Event​

• Triggered when the user selects or changes a time value
• Access the selected time value in your action handlers
• Use for real-time form validation or dependent field updates

On Click Actions​

• Configure custom actions when users interact with the widget
• Integrate with form workflows and business logic

Usage Examples​

Basic Time Selection​

{
  "type": "time",
  "name": "Meeting Time",
  "model": "meetingTime",
  "options": {
    "format": "HH:mm",
    "placeholder": "Select meeting time",
    "clearable": true,
    "arrowControl": true
  }
}

Time Range Selection​

{
  "type": "time",
  "name": "Working Hours",
  "model": "workingHours",
  "options": {
    "isRange": true,
    "format": "HH:mm",
    "startPlaceholder": "Start time",
    "endPlaceholder": "End time",
    "clearable": true
  }
}

Advanced Configuration with Validation​

{
  "type": "time",
  "name": "Appointment Time",
  "model": "appointmentTime",
  "options": {
    "format": "HH:mm:ss",
    "defaultValue": "09:00:00",
    "placeholder": "Select appointment time",
    "required": true,
    "validation": {
      "required": true,
      "rules": [
        {
          "rule": "custom",
          "message": "Appointment must be during business hours",
          "condition": "value >= '09:00' && value <= '17:00'"
        }
      ]
    }
  }
}

Time Formats​

Common Format Options​

• HH:mm - 24-hour format (e.g., 14:30)
• HH:mm:ss - 24-hour format with seconds (e.g., 14:30:45)
• hh:mm A - 12-hour format with AM/PM (e.g., 2:30 PM)
• hh:mm:ss A - 12-hour format with seconds and AM/PM

Custom Formats​

You can define custom time formats based on your application requirements. The widget supports standard time formatting patterns.

Data Handling​

Single Time Value​

When isRange is false, the widget returns a single time string in the specified format.

Time Range Value​

When isRange is true, the widget returns an array with two elements:

• [0] - Start time
• [1] - End time

Default Values​

• Single Time: Provide a time string in the specified format
• Time Range: Provide an array with start and end times

Integration with Forms​

Form Validation​

• The Time widget integrates seamlessly with form validation
• Required field validation is automatically handled
• Custom validation rules can be added for business logic

Form Submission​

• Time values are included in form submission data
• Values are formatted according to the specified format
• Range selections include both start and end times

Accessibility​

Keyboard Navigation​

• Full keyboard support for time selection
• Tab navigation between time components
• Arrow key support for time adjustment

Screen Reader Support​

• Proper labels and ARIA attributes
• Descriptive placeholder text
• Accessible error messages

Best Practices​

Time Format Selection​

• Use 24-hour format (HH:mm) for international applications
• Use 12-hour format (hh:mm A) for region-specific applications
• Include seconds only when precision is required

User Experience​

• Provide clear placeholder text indicating expected format
• Use arrow controls for easier time selection
• Enable clearable option for optional time fields

Validation​

• Set appropriate validation rules for business requirements
• Provide clear error messages for validation failures
• Consider time zone implications for your application

Performance​

• Use default values strategically to improve user experience
• Consider the impact of real-time validation on performance
• Optimize change event handlers for complex forms

Troubleshooting​

Common Issues​

• Format Mismatch: Ensure default values match the specified format
• Range Validation: When using ranges, validate that end time is after start time
• Time Zone: Consider time zone handling in your application logic

Debugging​

• Check browser console for validation errors
• Verify that the model property is correctly bound
• Ensure placeholder text is properly configured for range selections