Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

Time Picker Reference

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Layout and Classes

    Events

    Event Name Description Mandatory
    OnSelect Event will be triggered when a time is selected returning it. False

    CSS Selectors

    Element CSS Class Description
    .time-option .time-option-selected When the time option is selected
    .time-option .time-picker .dropdown-content-list .time-option[disabled="disabled"] When the time option is disabled

    Advanced Use Case

    Use the OnSelect event

    1. Drag the TimePicker pattern into the preview.

    2. Set a variable of type Time to the input.

    3. Set the StartTime Parameter to a variable Time.

    4. In the preparation, set the Time variable to the start time you want for the picker.

    5. Set the OnSelect Event to TimePatternOnSelect.

    6. In the TimePatternOnSelect action, assign TimeSelected to the Time variable.

    7. Set a Feedback_Message action and show the Timein the message.

    8. Create a container Timepicker_Container around the TimePicker.

    9. In the action TimePatternOnSelect, add an Ajax refresh for the Timepicker_Container.

    Disable specific times

    1. Drag the TimePicker pattern into the preview.

    2. Set a variable of type Time to the input.

    3. Click the plus before the AdvancedFormat parameter.

    4. Click the plus before the DisabledTimes parameter.

    5. Add the times NewTime(4,0,0) and NewTime(7,0,0).

    6. Publish and test.

    Start Input as Empty

    1. Drag the TimePicker pattern into the preview.

    2. Set a variable of type time to the input.

    3. Click the plus before the AdvancedFormat parameter.

    4. Set the StartEmpty parameter to True.

    5. Publish and test.

    • Was this article helpful?