It’s too easy to delete a date by accident in the current date-time component. It behaves as if it is possible to type in the date or time, while it’s not. If a user tires to type anything, the date will disappear and a null value will be stored instead. This makes the component rather useless in a database connected form. There is no simple undo on this component, like for e.g. text.
In addition, the current design of the component is a bit confusing for many users.
I know this has been a request from before this forum was created, and I wonder if there are plans for an improved version soon?
Or if there is a hidden trick for how to prevent users from accidentally deleting dates, then please let me know.
There is another datetime component that might work better for your users. If you use a ‘Text Edit’ with ‘Input Data Type’ set to ‘Date and Time’, you will get a more traditional date picker, which also allows your users to type the date on a keyboard.
It is rendered like this in Firefox:
However, I will also raise your request for a better time and date picker in a ticket.
Thanks for the advice. It’s working nicely, only that it seems to follow the language settings for the browser rather than the language for the app. In my case the default browser language is English while the app was using Norwegian. Do you know if there is a way to control the language settings for the browser based date picker as well?
The datetime picker is generated by your browser and follows the language settings of your browser. It’s not possible to customize its behavior in Appfarm Create.
Our customer requests an interval, they want to be able to select 15,30,45 or 00 on the minute selector (or at least every fifth minute). Is this doable in any way without using a coded component?
the textedit input workaround works nice on a computer but on the mobile they get the same issue (tricky to select the correct minute…
As I celebrate that it has been a year since I last commented on this topic, I would also like to take the opportunity to ask if a solution is getting closer?
Related Datepicker bugs, Material UI update
Probably nothing you can do about this (?), but it would look much better with some more space on the right side of the hour number when the scrollbar is visible. It works great now, but it could be visually improved a little.
Hi, and thank you for your feedback!
You are correct, this is the default appearance of the component, but we will look into whether we can override it. I will keep you updated.
Hi @Olav, do you know if the shouldDisableDate prop available in MUI 6 is one of the features on the roadmap, and, if so, if there is an ETA for it? Do you know of any workarounds available today to get this functionality without the use of a coded component?
Hi! I will register a request for this feature and update you once I know more about how it will be prioritized.
I don’t think there are any workarounds to prevent users from selecting specific dates, but I guess you could use functions to add specific validations of the selected date.
Thanks @Olav. We’re already using validations on selected dated, but we’re looking to improve the UX so that the user doesn’t need to select a date to know if it’s valid. We might end up using a coded component for the time being but hopefully at some point we’ll be able to go back to the built-in date picker.
