Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

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*&nbsp;
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>


 

 

Suggest Edit

Published March 24, 2017 - Updated October 8, 2020

Did you find this content helpful? Yes No

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us