Log in to AnswerLog in to Follow
Balaji Ravikumar
21Views
13Comments
Solved
Outsystems-Date Picker
Question
Traditional Web
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.

0
0
on 1st Apr
Benjith Sam
mvp_badge
MVP
Solution

Replying to Balaji Ravikumar's comment on 01 Apr 2021 17:37:32

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

See solution in context
TWALabDatePickerJS.oml

0
0
on 1st Apr
Benjith Sam
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

See solution in context
0
0
on 1st Apr

Hi @Benjith Sam 

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

Thank you

0
0
on 1st Apr

Replying to Balaji Ravikumar's comment on 01 Apr 2021 09:35:13


I Used another approach but this one is more cleaner.

Here's the oml 

Thank you @Benjith Sam 

Regards 

Gonçalo Almeida

DatePiker.oml

0
0
on 1st Apr
Benjith Sam
mvp_badge
MVP

Replying to Goncalo Almeida's comment on 01 Apr 2021 10:45:55

Thank you for sharing the .oml file :)


Kind regards,

Benjith Sam

0
0
on 1st Apr
Benjith Sam
mvp_badge
MVP

Replying to Balaji Ravikumar's comment on 01 Apr 2021 09:35:13

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

1
0
on 1st Apr

Replying to Benjith Sam's comment on 01 Apr 2021 15:22:40

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

0
0
on 1st Apr
Benjith Sam
mvp_badge
MVP
Solution

Replying to Balaji Ravikumar's comment on 01 Apr 2021 17:37:32

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

0
0
on 1st Apr

Hi Balaji,

How about using Input calendar?

1
0
on 1st Apr

Hi @cezarF 

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


0
0
on 1st Apr

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,

0
0
on 1st Apr

Hi @Komal Kumbhar

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

Thank you

0
0
on 1st Apr
Benjith Sam
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

0
0
on 1st Apr

Hi @Benjith Sam 

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

Thank you

0
0
on 1st Apr

Replying to Balaji Ravikumar's comment on 01 Apr 2021 09:35:13


I Used another approach but this one is more cleaner.

Here's the oml 

Thank you @Benjith Sam 

Regards 

Gonçalo Almeida

DatePiker.oml

0
0
on 1st Apr
Benjith Sam
mvp_badge
MVP

Replying to Goncalo Almeida's comment on 01 Apr 2021 10:45:55

Thank you for sharing the .oml file :)


Kind regards,

Benjith Sam

0
0
on 1st Apr
Benjith Sam
mvp_badge
MVP

Replying to Balaji Ravikumar's comment on 01 Apr 2021 09:35:13

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

1
0
on 1st Apr

Replying to Benjith Sam's comment on 01 Apr 2021 15:22:40

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

0
0
on 1st Apr
Benjith Sam
mvp_badge
MVP
Solution

Replying to Balaji Ravikumar's comment on 01 Apr 2021 17:37:32

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

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