ejDateRangePicker focus

[Pratura]

Hi,

how to set focus to the ejDateRangePicker control so the user can manually enter the date range without opening the popup.

This doesn't work:

$("#dateRange").prev().focus();

[Prem Kumar Madhan Raj]

Hi Pratura,   

  

Thanks for contacting Syncfusion Support.   

  

We have checked with your query “how to focus the DateRangePicker component to allow the user to enter DateRange value manually without opening the popup”. We can focus the DateRangePicker component initially without opening the popup by using the create event available of DateRangePicker component as show in the below code snippet.   

  

<ej-date-range-picker id="DateRange" create="create" ></ej-date-range-picker>   

   

<script>   

    function create() {    

        this.element.focus();   

    }   

</script>   

  

For your convenience, we have attached the sample in the below link. Please check it.    

   

Sample Link:  http://www.syncfusion.com/downloads/support/directtrac/196662/ze/DateRangePicker_incident_(2)-456924393 

 

   

Regards,   

   

Prem Kumar. M

[Pratura]

Hi Prem Kumar

Thank you for the answer.

The focus to the dateRangePicker control has to be on certain events.

I don't want it focused always on create, I am using it in a dialog control and after a button click if some criteria is met i want this control to be focused or some other.

So this doesn't help in my case.

Is there another way?

[Prem Kumar Madhan Raj]

Hi Pratura,   

   

Sorry for the inconvenience.   

   

We have looked into your query to focus the DateRangePicker component on certain event (button click). We can focus the DateRangePicker component on a button click event by using the instance of the DateRangePicker component as show in the below code snippet.   

 

<table> 

    <tr> 

        <td> 

            <ej-date-range-picker id="DateRange"></ej-date-range-picker> 

        </td> 

        <td> 

            <ej-button id="button" click="click" text="Click me to focus" /> 

        </td> 

    </tr> 

</table> 

 

 

<script> 

    function click() { 

        // define your criteria here 

        daterangeObj = $("#DateRange").ejDateRangePicker("instance");// creating instance for DateRangePicker 

        daterangeObj.element.focus();// Focussing the daterangepicker element 

    } 

</script> 

 

For your convenience, we have created a sample (focusing date range picker on button click) and attached in the below link. Please check it.   

   

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/193820/ze/DateRangePicker_incident-1281385569 

 

Regards, 

 

Prem Kumar. M