Opened 6 days ago

Last modified 17 hours ago

#15323 new bug

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 (6)

comment:1 Changed 6 days ago by Ryan J Ollos

Description: modified (diff)

comment:2 Changed 6 days ago by surenderk2009

Description: modified (diff)

comment:3 Changed 6 days 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 5 days ago by Ryan J Ollos

Description: modified (diff)

comment:5 Changed 5 days 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 41 hours ago by surenderk2009 (previous) (diff)

comment:6 Changed 17 hours ago by surenderk2009

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

Note: See TracTickets for help on using tickets.