orion-cengage
commented
7 months ago This ticket is somewhat related to #1119 where we want to introduce masking to various inputs. In addition to that, let's see if we can update the Date Picker to allow the user to use the arrow keys to choose the date like the MUI date picker does (https://mui.com/x/react-date-pickers/date-picker/).
This will better align the Date Picker input with our Time input. I'll want to update some related styles on the Time input as well.
Is your feature request related to a problem? Please describe. The Date Picker does not support date formatting of the input field (see the native HTML input behavior for date types). This adds some friction to the UX of the component for users who wish to type the date manually rather than use the calendar widget.
Describe the solution you'd like I would like the date input to provide a default formatting that can be tabbed through so that a user can more easily fill out the date and not input invalid strings which require an additional layer of validation.
Describe alternatives you've considered MUI X Date Picker.
Planning to use the existing React Magma date picker (because it's being added to a form that uses the default inverse theme), and write a function to validate the date input. If the format is invalid (or fails other business logic) I will show an error message and disable the submit form button.
Additional context
Desired UX - I can tab through month/day/year and I do not have to provide '/' to input the formatted date: