Support Article
Unable to tab in to the calendar icon that uses pxDateTime
SA-33270
Summary
Unable to tab in to the calendar icon that uses pxDateTime control.
As part of Upgrade from PRPC 6.1SP2 to Pega 7.2, user has replaced all the Date & Time related deprecated control with pxDateTime Control.
Obviously, pxDateTime provides more flexibility in terms of configuring lot of patterns.
In PRPC 6.1 SP2, user is able to tab out from the Date or Date Time calendar field into the calendar icon as the icon was outside the field.
But, in Pega 7.2, the icon is inside the field and we are not able to tab out to icon from the field. User needs this as they heavily use Keyboard.
Error Messages
Not Applicable
Steps to Reproduce
1. Use pxDateTime control in a repeating layout.
2. Observe during runtime you will be able to tab into the field and not the icon.
Root Cause
Using pxDateTime control with display mode as Text input+Calendar for which the calendar is a part of <input element as an image.
Hence, one can only tab into the input but not in to the icon.
Resolution
Use the following script to resolve the issue:
<script>
/* Handler for making calendar control tabbable*
var toAddHandler =
(function()
{
$(".inactvIcon").attr("tabindex", "0").keydown(function(e)
{
if (e.which == 40) {
$(document.activeElement).click(); /*Replicate mouse click on down arrow press*/
}
});
});
$(document).on("keypress keyup click", function(e) {
if (document.activeElement.className=="inactvDtTmTxt")
{
toAddHandler(); /*Call handler when in calendar control*/
}
});
</script>
Published March 24, 2017 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.