37
Views
5
Comments
search enabled by enter when selecting datepicker
Question
Application Type
Reactive

Hi, 

I kept a datepicker to search the data using Date. I want to select the date in the datepicker and if I click on enter on the keyboard , I need to get the data in the table without pressing the search key. please help for this. I already included the search in form and also kept default property of the search action to YES but its not working.

UserImage.jpg
Puja Rani

Hi @Gayathri Gali ,

You can create a on keypress event action on the search input, add below JS. Pass the input search widget id and button widget id . 

var input = document.getElementById($parameters.InputId);input.addEventListener("keypress", function(event) {  if (event.key === "Enter") {    event.preventDefault();    document.getElementById($parameters.ButtonId).click();  }});

Hope this helps! 

UserImage.jpg
Gayathri Gali

Hi, Thanks for the response.

I used a date picker . So will this solution work on mine?

UserImage.jpg
Puja Rani

Hi,

For date picker I tested and what I did is, added this JS on the On Ready event. In Button Id input passed the Search button widget id(which will trigger your search action on enter press) . 

Just to add I tried to add OnKeyPress for the input in datepicker (passed the Date widgetId for the input var for previous js), it worked if the focus of cursor is in the widget, it didn't worked if the cursor is out of focus from the date picker. So I placed this JS code on the OnReady event which works both ways. Hope this helps.

UserImage.jpg
Gayathri Gali

I'm sorry, Can you tell me step by step process, I used a datepicker and already had a event on that which will store the selected date in a local variable. How to add another event?

UserImage.jpg
Puja Rani
  • Create a On Ready event action 
  • In that action add this JS script 
  • In the input parameter of JS passed the widget id of the search button (which you click for search)
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.