Bug in PowerApps Portal (Power Pages) DateTimePicker when using the character 't' as an input

(0) Share

Report

Posted on by Milansinh Raj

149

We encountered an issue while working with the PowerApps Portal DateTimePicker component. Our requirement was to display the date in the 'dd/MMM/yyyy' format, allowing users to either select a date from the DateTimePicker or manually enter it in the input box. While selecting a date from the DateTimePicker worked fine, we faced an issue when typing into the input box.

Example:

01/Feb/2022 - Success
02/Jan/2022 - Success
02/Oct/2022 - When the character 't' is entered, the entire date is automatically removed, resulting in a blank, current, or previously entered date. This behaviour prevents the user from entering the complete date as shown in the examples.

Categories:

General topics

I have the same question (0)

All responses (1)

Answers (1)

Verified answer

Milansinh Raj 149 on at

Like
a
(0)

Report
Copy link

Link copied!
Resolution Steps:
During my search for a solution to the specific issue, I came across a helpful blog post. The blog post, which I found at https://debajmecrm.com/solved-typing-in-character-t-automatically-inserting-current-datetime-in-datepicker-controls-on-webforms-in-dynamics-365-powerapps-portals/.
However, the provided solution in the blog post didn't work for my case. Since the blog post was published in 2020, there's a possibility that the object structure has changed, making it challenging to access the required data and events to remove the event handlers. It's important to note that this limitation may also apply to newer solutions, as they could feature different object structures.
I attempted to find a solution that doesn't rely on the object's structure, aiming to avoid any dependence on static identifiers or names within it.

function removeDateTimePickerEventhandler(fieldName){ var dateTimePickerID = fieldName +"_datepicker_description"; // Find the DateTimePicker control using its ID var $dateTimePicker = $('#' + dateTimePickerID); // Get all 'keydown' event handlers attached to the DateTimePicker control if( $._data!=undefined){ var keydownEventHandlers = $._data($dateTimePicker[0], "events").keydown; // Iterate over the keydown event handlers and remove them if (keydownEventHandlers) { $.each(keydownEventHandlers, function(index, eventHandler) { // Remove the event handler $dateTimePicker.off('keydown', eventHandler.handler); }); } } }

Was this reply helpful? Yes No