Opened 2 months ago

Closed 2 months ago

#15323 closed bug (duplicate)

Tabbing is not working in Datepicker

Reported by: surenderk2009 Owned by:
Priority: minor Milestone: none
Component: ui.core Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by Ryan J Ollos)

There is an input field accepting the date value and the date picker button is next to it which is created by jquery (because of javascript code i added, please refer the code in the end). If I click on the date picker button, the calendar opens but the cursor sets the focus on the input field instead of going inside the calendar, meaning on press of tab key the focus never goes inside the calendar i.e. i'm unable to navigate inside the calendar using tab key. This started happening since I upgraded jquery version to 3.3.1 and jquery-ui version to 1.12.1. Please see if you can help.

Following is how the input field is defined in the page:

<input id="dateOfBirth" name="dateOfBirth" class="date-format-class" type="text" value=""/>

<script type="text/javascript">
$(document).ready(function(){
  $("#dateOfBirth").datepicker({
    showOn: 'button',
    showButtonPanel: true,
    changeMonth: true,
    changeYear: true,
    buttonImage: '/images/calendar.png',
    maxDate: '0d',
    yearRange: '-99:+0',
    dateFormat: 'mm/dd/yy',
    buttonText: 'Select Date'
  });
});
</script>

Thanks in advance.

Change History (8)

comment:1 Changed 2 months ago by Ryan J Ollos

Description: modified (diff)

comment:2 Changed 2 months ago by surenderk2009

Description: modified (diff)

comment:3 Changed 2 months ago by surenderk2009

Description: modified (diff)

Tried to create it in jsfiddle but it only has jquery as options. Not able to see jquery-ui due to which the javascript core in description is not able to find .datepicker on dateOfBirth. Please suggest.

comment:4 Changed 2 months ago by Ryan J Ollos

Description: modified (diff)

comment:5 Changed 2 months ago by surenderk2009

https://jsbin.com/tulayil/edit?html,js,output

Please find the link for jsbin. The tab key does not take me inside the datepicker calendar.

Last edited 2 months ago by surenderk2009 (previous) (diff)

comment:6 Changed 2 months ago by surenderk2009

Hi, Any update or do you need any other information?

comment:7 Changed 2 months ago by surenderk2009

Please close this ticket. I have created another one with updated details as there was no response for long time on this.

Last edited 2 months ago by surenderk2009 (previous) (diff)

comment:8 Changed 2 months ago by Ryan J Ollos

Resolution: duplicate
Status: newclosed
Note: See TracTickets for help on using tickets.