Skip to main content

Search and Top Navigation

#15323 closed bug (duplicate)

Opened December 06, 2018 04:01PM UTC

Closed December 19, 2018 05:53AM UTC

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

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:

#!text/html
<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.

Attachments (0)
Change History (8)

Changed December 06, 2018 08:48PM UTC by rjollos comment:1

description: 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: \ <script type="text/javascript">$(document).ready(function(){$("#dateOfBirth").datepicker({showOn: 'button', showButtonPanel: true, changeMonth: true, changeYear: true, buttonImage: '/apspssp/framework/skins/APSP/images/calendar.png', maxDate: '0d', yearRange: '-99:+0', dateFormat: 'mm/dd/yy', buttonText: 'Select Date'});});</script> \ \ \ Thanks in advance.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: \ {{{#!text/html \ <script type="text/javascript"> \ $(document).ready(function(){ \ $("#dateOfBirth").datepicker({ \ showOn: 'button', \ showButtonPanel: true, \ changeMonth: true, \ changeYear: true, \ buttonImage: '/apspssp/framework/skins/APSP/images/calendar.png', \ maxDate: '0d', \ yearRange: '-99:+0', \ dateFormat: 'mm/dd/yy', \ buttonText: 'Select Date' \ }); \ }); \ </script> \ }}} \ \ Thanks in advance.

Changed December 07, 2018 08:04AM UTC by surenderk2009 comment:2

description: 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: \ {{{#!text/html \ <script type="text/javascript"> \ $(document).ready(function(){ \ $("#dateOfBirth").datepicker({ \ showOn: 'button', \ showButtonPanel: true, \ changeMonth: true, \ changeYear: true, \ buttonImage: '/apspssp/framework/skins/APSP/images/calendar.png', \ maxDate: '0d', \ yearRange: '-99:+0', \ dateFormat: 'mm/dd/yy', \ buttonText: 'Select Date' \ }); \ }); \ </script> \ }}} \ \ Thanks in advance.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: \ {{{#!text/html \ <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.

Changed December 07, 2018 08:13AM UTC by surenderk2009 comment:3

description: 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: \ {{{#!text/html \ <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.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=""/> \ {{{#!text/html \ <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.

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.

Changed December 07, 2018 02:43PM UTC by rjollos comment:4

description: 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=""/> \ {{{#!text/html \ <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.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: \ \ {{{#!text/html \ <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.

Changed December 07, 2018 07:15PM UTC by surenderk2009 comment:5

_comment0: https://jsbin.com/tulayil/edit?html,js,output \ \ Please fine the link for jsbin. The tab key does not take me inside the datepicker calendar.1544507649992458

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.

Changed December 12, 2018 05:59AM UTC by surenderk2009 comment:6

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

Changed December 19, 2018 05:20AM UTC by surenderk2009 comment:7

_comment0: Please close this ticket. I have created another one with updated details.1545196848055900

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

Changed December 19, 2018 05:53AM UTC by rjollos comment:8

resolution: → duplicate
status: newclosed