TabIndex

[Stefano Capobianco]

Hi support, i need to set the tabindex for a DatePicker control.

This is the datepicker definition:

                                    <ej-date-picker id="startDate" locale="@(System.Threading.Thread.CurrentThread.CurrentCulture.Name)" ej-for="StartDate" width="100%"

                                                    html-attributes="htmlAttrStartDate" watermark-text="@viewLocalizer["StartDatePlaceholder"].Value" create="StartDateCreate"></ej-date-picker>

                                    <span asp-validation-for="StartDate" class="text-danger"></span>

And this is the create script:

        function StartDateCreate() {

            this.wrapper.attr("tabindex", "5")

        }

I need the focus inside the input box to write the data like a normal input box. How i do that ?

Tanks in advance

Stefano Capobianco

[Prem Kumar Madhan Raj]

Hi Stefano, 

 

Thanks for contacting Syncfusion support. 

 

Query1: Need to set tabindex for datepicker control. 

 

Answer: We can set tabindex property for DatePicker control by using html-attributes API available for DatePicker as shown in the below code snippet. 

 

@{ 

    IDictionary<string, object> htmlAttrStartDate = new Dictionary<string, object>(); 

    htmlAttrStartDate.Add("tabindex", "5"); 

} 

 

<ej-date-picker id="datepick" ej-for="@Model.dateValue" html-attributes="htmlAttrStartDate"></ej-date-picker> 

 

 

Query2: Need to focus inside the input textbox like normal input textbox. 

 

Answer: We can focus the DateRangePicker component by using the instance of the DatePicker component as show in the below code snippet. In the below snippet, the DatePicker component is focused on a button click event. 

 

<ej-date-picker id="datepick" ej-for="@Model.dateValue" html-attributes="htmlAttrStartDate"></ej-date-picker>  

 

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

<script> 

    function click() { 

        var dateObj = $("#datepick").ejDatePicker("instance");// creating instance for datepicker 

        dateObj.element.focus();// focusing the datepicker 

    } 

</script> 

 

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

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/135234/ze/datepicker_HtmlAttributes536936642 

 

 

Regards, 

Prem Kumar. M

[Stefano Capobianco]

Hi Prem, thanks for the solution. I'm looking exactly for this.

Best regards

Stefano Capobianco

[Prem Kumar Madhan Raj]

Hi Stefano, 

  

Most welcome. We are glad to know that your requirement has been achieved. Please let us know if you need further assistance. 

  

Regards, 

Prem Kumar. M