If you're encountering issues with the Date Picker's clear functionality in OutSystems—such as the clear button not working consistently or requiring multiple clicks—here's a step-by-step guide to address the problem:

Step-by-Step Solution to Clear the Date Picker Properly

1. Use the DatePickerClearInputDate Client Action

OutSystems provides a built-in client action named DatePickerClearInputDate to clear the Date Picker's input.(OutSystems)

• Steps:

  1. Drag the DatePickerClearInputDate client action into your screen or block.

  2. Set the InputId parameter to the Id of the input widget bound to your Date Picker.(OutSystems)

This action programmatically clears the Date Picker's value.(OutSystems)

2. Ensure the Correct InputId is Used

It's crucial to pass the correct Id to the DatePickerClearInputDate action:(OutSystems)

• If you're using the Date Picker pattern, pass the Id of the entire Date Picker block, not just the internal input field.

Passing the wrong Id can result in the clear action not functioning as expected.

3. Handle Validation Errors

If the Date Picker is within a form that has validation errors, the clear action might not work on the first attempt. To address this:(Medium)

• Steps:

  1. Before invoking DatePickerClearInputDate, reset the validation state of the input.

  2. You can achieve this by using the ClearValidationMessages client action or by manually resetting the validation logic.(OutSystems, GitHub)

This ensures that validation errors don't interfere with the clearing process.

4. Use JavaScript as a Fallback

If the above methods don't resolve the issue, you can use JavaScript to clear the Date Picker's value:

• Steps:

  1. Add a JavaScript widget to your screen.

  2. Use the following code, replacing 'YourInputId' with the actual Id of your input:(OutSystems)

  3. document.querySelector('#YourInputId').value = '';
  
  

This script directly clears the value of the input field associated with the Date Picker.

5. Update OutSystems UI to the Latest Version

OutSystems has addressed various issues related to the Date Picker in recent updates. Ensure you're using the latest version of OutSystems UI:

• Steps:

  1. Navigate to Forge in Service Studio.

  2. Search for OutSystems UI.

  3. If an update is available, download and apply it to your application.

Additional Tips

• Resetting the Bound Variable: If your Date Picker is bound to a variable, ensure you reset this variable to NullDate() when clearing the input. This ensures consistency between the UI and the underlying data.(Stack Overflow)

• Handling Custom Implementations: If you've customized the Date Picker or its associated input fields, ensure that these customizations don't interfere with the standard clearing mechanisms.