Appfarm needs a better date-time component

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.

Hi Lars,

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:
bilde

However, I will also raise your request for a better time and date picker in a ticket.

1 Like

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?

Regrettably, no.

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.

What about integrating the following MIT licensed component in Appfarm? It’s minimalistic, superfast, has date, time, range, locale and can also be used inline. GitHub - flatpickr/flatpickr: lightweight, powerful javascript datetimepicker with no dependencies

Or alternatively, create an example in showroom for how to use it in a coded component :slight_smile:

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? :stuck_out_tongue_winking_eye:
Related Datepicker bugs, Material UI update

1 Like

An upgrade to MUI 6 is scheduled for the upcoming release, planned for the first half of February!

5 Likes

A new and improved date and time picker is now live in Release 113.

2 Likes

I’ve noticed—this is a long-awaited upgrade. Thanks!

1 Like

This is great news.

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.

1 Like