Thank you for your response.

This issue occurs when the user edits the date field, so the field already contains a value.

I also attempted to clear the value explicitly in the OnChange event of the input widget using DatePicker_Clear, but I’m unable to pass the widget’s ID to the action. The Date Picker is inside a List, and when I try to reference the widget ID, the elements inside the List are not available for selection.

Hi Shivangi,

Thanks for the clarification. Since the Date Picker is inside a List, you cannot directly reference the widget ID in your action (this is expected in Reactive apps). Also, calling DatePicker_Clear will not work because the Date Picker component replaces the input element at runtime.

To reliably clear the value when the user edits the field, you can use the following approach:

1. Handle everything at the data level, not at the widget level. Instead of trying to clear the visual input, simply assign:

   InitialTrainingDate = NullDate()

   This will clear the field on the next screen refresh, regardless of the List context.

2. If you want the change to happen immediately while inside a List, ensure the input is bound to the List item’s attribute, for example:

   ListItem.EventDate = NullDate()

   When the screen re-renders, the Date Picker will receive the new empty value.

3. You do not need to reference the widget ID. In Reactive apps, the UI always reflects the variable’s value, so controlling the variable is all you need. The Date Picker will automatically update once its bound variable becomes NullDate().

Thanks for replying so fast, I will try to follow the solution you gave.

Its correct approach, nice job @Peter Hieu 

Hi,

I will try this approach. Meanwhile if you can share oml, it would be helpful.

Thanks

Shivangi

You can see the OML file bellow.

The solution mentioned by @Mihai Melencu is completely correct for your case. I also added a sample where the Date Picker is used inside a List, similar to the scenario you described. 

Thanks for sharing the OML. My main goal was to clear the date in the input field. I tried using the Date Picker’s clear action, but since the widget is inside a list, I couldn’t retrieve its widget ID. I also noticed that in your OML, the date can’t be cleared either. 

What would trigger the clearing action? And when you say “clean,” do you mean setting the variable to null and also clearing the DatePicker value?

It would also be helpful if you could share a sample OML that reflects your exact use case.

Like you see in below image , I selected the date and directly pressing backspace button in keyboard, but its not getting cleared up.

Thank you for the explanation, now I get the use-case.

In this case you will need to use the OnInitialize event of the Datepicker and a javascript to bind the clear action to the key event when user presses backspace. This is the JS snippet:

1. var widget = document.getElementById($parameters.DatePickerId);
2. if (!widget) {
3.     return;
4. }
5. 
   
6. var dp = widget.querySelector('.osui-datepicker');
7. if (!dp) {
8.     return;
9. }
10. 
    
11. var input = dp.querySelector('input[type="text"]');
12. if (!input) {
13.     return;
14. }
15. 
    
16. input.addEventListener('keydown', function (e) {
17.     if (e.key === 'Backspace') {
18.         if (window.OutSystems &&
19.             OutSystems.OSUI &&
20.             OutSystems.OSUI.Patterns &&
21.             OutSystems.OSUI.Patterns.DatePickerAPI &&
22.             typeof OutSystems.OSUI.Patterns.DatePickerAPI.Clear === 'function') {
23. 
    
24.             OutSystems.OSUI.Patterns.DatePickerAPI.Clear($parameters.DatePickerId);
25.         }
26.         e.preventDefault();
27.     }
28. });

Hi,

Thank you so much for providing the solution. I will implement the same way and let you know if i need any further help.

Thanks again !