Support Article
Unable to access Date picker in DateTime control
SA-106478
Summary
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
- Configure a DateTime control.
- 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.
Resolution
Perform the following local-change:
Add the below code in the UserWorkForm
<script>
/* Handler for making calendar control tabbable*/
var toAddHandler =
(function()
{
$(".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*/
}
});
</script>
Published April 23, 2020 - Updated December 2, 2021
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.