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 access Date picker in DateTime control



Unable to access the Date picker in the DateTime control with the keyboard. That is, on clicking the Tab key (on the keyboard) in the Date control, the focus moves to the next control instead of the Date picker.

Error Messages

Not Applicable

Steps to Reproduce

  1. Configure a DateTime control.
  2. Click the Tab key, on the keyboard, in the Date control at runtime.

Root Cause

The client had used the Date control with Display mode as Text input+Calendar, for which the calendar was a part of the Input element as an image (it was not considered as a separate input). Hence, when the user clicked the Tab key, the focus moved to the next input field instead of the Date picker.


Perform the following local-change:

Add the below code in the UserWorkForm  

/* Handler for making calendar control tabbable*/
var toAddHandler =

$(".inactvIcon").attr("tabindex", "0").keypress(function(e)
if (e.which == 13) {
$(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*/

Published April 23, 2020 - Updated December 2, 2021

Was this useful?

0% found this useful

Have a question? Get answers now.

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

Did you find this content helpful?

Want to help us improve this content?

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