Transaction Entry v2 Block Date Picker

[JustBenjamin]

Description

In the Transaction Entry V2 block, the Date Picker field is currently assigned as text type <input type="text"> instead of date type <input type="date"> . As a result, the date selection on mobile is happening with a web style calendar control instead of a more streamlined mobile date control.

Actual Behavior

Actual Behavior

Expected Behavior

Expected Behavior

Steps to Reproduce

• Go to a page with the Transaction Entry V2 block (a gateway may be needed in the environment in order to view the page with the block).
• Click on the date picker
• Inspect the element

Issue Confirmation

• [X] Perform a search on the Github Issues to see if your bug or enhancement is already reported.
• [X] Reproduced the problem on a fresh install or on the demo site.

Rock Version

Rock McKinley 16.5 (1.16.5.4)

Client Culture Setting

en-US

[nairdo]

@JustBenjamin That might be an problem for us to implement. Currently our datePicker controls use the input type="text" and build their own date picker UI. If we were to try to use type="date" the browsers would take over and try to do their own thing as seen here:

Can you describe what issue you're wanting to fix with our custom datePicker control?

[You can see the same issue arises with the bootstrap-datepicker library we use here when you change the markup to type="date" when using the Component mode.]

[edwerd]

@nairdo I think the concern here is that the support for the custom datePicker is fairly weak on a mobile device. The calendar often gets cut off or is hard to press on mobile devices. I understand you used the custom date picker for a larger range of supported browsers however in 2024 this far less of an issue. On a block that is responsible for a church's primary giving, I worry that not using the native datepicker is reducing the overall user experience and to some degree the total giving itself.