Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Timepicker - "Critical" Feature Requests

ECKD GmbH priority asked 4 years ago


Requests (ordered by importance)

  1. "Clear" Button Text can be changed by @input (config or single prop). We need to support multiple languages and therefor need dynamic configuration of labels (like Datepicker Component).
  2. Position of Clear and Done Buttons can be changed by @input. Currently, they are in wrong order from our point of view (every "save" or "done" action is normally on the right while dismiss is on the left.) Currently, for both the above problems, we have to adjust position & button content with custom scss. This is extremly fragile & can break very easy if your timepicker class / html structure changes in the future.
  3. @Output for timeCleared (or emit timeChanged with empty value). Currently, no event is raised, and even registerOnChange / onChangeCb can't be used because it isn't called in close() function, which is called for the Clear action. Currently we have to use registerOnTouched as a workaround to notifiy clear.
  4. Add an (configurable) icon or button as a timepicker indicator at the end of the input (like Datepicker). Increases recognition of time picker inputs. Additional, you could provide an option to prevent input click from opening the timepicker (like the focus @input) and just open it from the icon / button.
  5. Behaviour & @Input for save selection and close picker after hour and minute selected. Could be an easy way to reduce clicks for power users.

Currently we have to do some workarounds / "dirty" hacks to use the timepicker. It would be nice if at least the labeling, button positioning & the @output events would work as described. Of course, if I missed something and there are already viable options to reach the expected behaviour I'd be happy about every hint.


Konrad Stępień staff commented 4 years ago

Hi @ECKD Service Gmbh,

Thank you for your suggestions!

Currently, I do refactor time picker component and I planned to use implement points 1, 2, 4 for this moment. Also, I will look at the other options and try to implement these elements as best as possible for customizing by user.

However, the implementation of this component will be planned in a few more releases, so you can tell what you have the biggest problems with and I will try to remedy it faster if possible.


ECKD GmbH priority commented 4 years ago

Thank you for your answer, sounds great! Currently the biggest problems are the "Clear" label & the positions of the buttons. It would be great if this would be configurable because it's basically against our UX Design Guide. An @Output for timeCleared would also be great, but we have a workaround for now so this is less important.

We're looking forward to the future component :)


Konrad Stępień staff commented 4 years ago

Hi @ECKD Service Gmbh,

I will add these features for actual time picker maybe in next release.

Best regard, Konrad. :)


Konrad Stępień staff commented 4 years ago

Hi @ECKD Service Gmbh,

My suggestions:

Inputs:

  1. buttonClearLabel
  2. ampmClass (this is wrapper)
  3. footerClass

And for example if you want to display buttons (Done & clear) inline , just set [footerClass]="d-flex".

This solution is good for you?


ECKD GmbH priority commented 4 years ago

Great work, with the new version we were able to remove every workaround we had to implement before, thank you very much!


osbeug001 free answered 4 years ago


Hi Konrad, I'm currently building an application for my company with Pro version & for me, point 3 is my main issue.

I'm using the timepicker in a reactive form setup. Upon the clicking the clear button, the input is cleared but the from's control value isn't cleared. Without an output or event for the clear button, I currently have no way of clearing the control value manually.

I have uploaded a gif to illustrate here.


Konrad Stępień staff commented 4 years ago

Hi @osbeug001,

I just implemented this functionality and I think everything works fine.

If there are no additional problems we will add these features in this update.

Best, Konrad.


osbeug001 free commented 4 years ago

Hi Konrad, That is great thanks. What is the ETA on the update?


Arkadiusz Idzikowski staff commented 4 years ago

The next update will be probably released on monday (3.02.2020).


osbeug001 free commented 4 years ago

Great thanks.

Just something I noticed in the image above, does 'Close' clear the field?

Can you perhaps add a third button and have 'Done', 'Close' and 'Clear' buttons?


Konrad Stępień staff commented 4 years ago

Hi @osbeug001,

I added a new @Inputs for component, for example for add a new button Close to close modal without losing data

The gif shows my tests of new features.

Best, Konrad.


osbeug001 free commented 4 years ago

Hi Konrad, That is awesome. Thanks.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.8.2
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No