Outsystems-Date Picker
Application Type
Traditional Web

Hi Team

I have a date picker in my application, when I selected Today in date picker the picker pop up should be close automatically, can anyone help me to resolve this issue with JS or any other solution.


Thank you in advance.

mvp_badge
MVP
Solution

Hi Balaji,

Refer to the attached .oml file

Implementation Steps:

  • Add an additional input parameter called InputId to the OnSelect Event handler and for each DatePicker pass the i/p parameter value accordingly.
  • Refer the same InputId input parameter in the JS code (RunJavaScript node)
"
    document.querySelector('#" + EncodeJavaScript(InputId) + "').blur();
"

See this sample screen DatePickerJSDemo

Hope this helps you!


Kind regards,

Benjith Sam

TWALabDatePickerJS.oml

mvp_badge
MVP
Solution

Hi Balaji,

For the mentioend use-case, I would suggest the following solution

1) Define an OnSelect event handler for the DatePicker as shown below

2) Within the OnSelect event handler action flow define a logic based on the use-case

Compare the Local Variable (mapped with the Date input) date value with the current date using the IF node and execute the JS code using RunJavaScript server action (referenced from HttpRequestHandler module)

3) Used JavaScript code

"
    document.querySelector('#" + DateInpt.Id + "').blur();
"

See this sample screen DatePickerJSDemo


Hope this helps you!


Kind regards,

Benjith Sam

Hi @Benjith Sam 

Its perfect also can you share the OML file for better understand.

Thank you


I Used another approach but this one is more cleaner.

Here's the oml 

Thank you @Benjith Sam 

Regards 

Gonçalo Almeida

DatePiker.oml

mvp_badge
MVP

Thank you for sharing the .oml file :)


Kind regards,

Benjith Sam

mvp_badge
MVP

Apology for the late reply, I did the same as shared by Goncalo Almeida. 

You're welcome, Balaji. Glad to help you :)


Kind regards,

Benjith Sam

Hi @Benjith Sam 

Yes, I came to know it's the same as you said, and one more thing I want to know, how to pass Two widget id in that same Script because I am using it for From date and To date fields so I want to pass two ID in that script.

Regards

Balaji

mvp_badge
MVP
Solution

Hi Balaji,

Refer to the attached .oml file

Implementation Steps:

  • Add an additional input parameter called InputId to the OnSelect Event handler and for each DatePicker pass the i/p parameter value accordingly.
  • Refer the same InputId input parameter in the JS code (RunJavaScript node)
"
    document.querySelector('#" + EncodeJavaScript(InputId) + "').blur();
"

See this sample screen DatePickerJSDemo

Hope this helps you!


Kind regards,

Benjith Sam

TWALabDatePickerJS.oml

Hi Balaji,

How about using Input calendar?

Hi @cezarF 

Thanks for your reply I want to use only the picker I mentioned in my post.


Hi Balaji,

Did you assign the default value to the local variable that you assigned to input widget ?

Also please  share the screen shot onchange action of Input field,

I tried this and on input field's onchange action I refreshed the container that contains date picker and input filed and it worked for me , you can also try this way,

Kind Regards,

Hi @Komal Kumbhar

If I refresh the container the selected values in disappeared in variable .

Thank you

mvp_badge
MVP
Solution

Hi Balaji,

For the mentioend use-case, I would suggest the following solution

1) Define an OnSelect event handler for the DatePicker as shown below

2) Within the OnSelect event handler action flow define a logic based on the use-case

Compare the Local Variable (mapped with the Date input) date value with the current date using the IF node and execute the JS code using RunJavaScript server action (referenced from HttpRequestHandler module)

3) Used JavaScript code

"
    document.querySelector('#" + DateInpt.Id + "').blur();
"

See this sample screen DatePickerJSDemo


Hope this helps you!


Kind regards,

Benjith Sam

Hi @Benjith Sam 

Its perfect also can you share the OML file for better understand.

Thank you


I Used another approach but this one is more cleaner.

Here's the oml 

Thank you @Benjith Sam 

Regards 

Gonçalo Almeida

DatePiker.oml

mvp_badge
MVP

Thank you for sharing the .oml file :)


Kind regards,

Benjith Sam

mvp_badge
MVP

Apology for the late reply, I did the same as shared by Goncalo Almeida. 

You're welcome, Balaji. Glad to help you :)


Kind regards,

Benjith Sam

Hi @Benjith Sam 

Yes, I came to know it's the same as you said, and one more thing I want to know, how to pass Two widget id in that same Script because I am using it for From date and To date fields so I want to pass two ID in that script.

Regards

Balaji

mvp_badge
MVP
Solution

Hi Balaji,

Refer to the attached .oml file

Implementation Steps:

  • Add an additional input parameter called InputId to the OnSelect Event handler and for each DatePicker pass the i/p parameter value accordingly.
  • Refer the same InputId input parameter in the JS code (RunJavaScript node)
"
    document.querySelector('#" + EncodeJavaScript(InputId) + "').blur();
"

See this sample screen DatePickerJSDemo

Hope this helps you!


Kind regards,

Benjith Sam

TWALabDatePickerJS.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.