TimePicker Feature Requests

Topic: TimePicker Feature Requests

david@shadowshot.systems pro asked 10 months ago

  1. Option to enable rounding on units. eg. round hours to nearest 2, round minutes to nearest 5
  2. Option to enable string format (eg H:mm or HH:mm tt or hh:mm or hh:mm:ss)

Resources (screenshots, code snippets etc.)

<mdb-time-picker [buttonLabel]="'Done'"
                               [label]="'Clock In'"
                               [ngModel]="clockIn" (timeChanged)="clockIn_changed($event)"></mdb-time-picker>

Arkadiusz Idzikowski staff commented 10 months ago

Thank you for sharing this ideas with us, we will discuss this features with our design team.

Could you add more information and examples for the first feature?

ShadowshotSys pro commented 10 months ago

Happy to.

I'm creating a timesheet and we don't want employees clocking in at 7:07, we want the ability to only select the nearest n minutes depending on employee (their role some are rounded to nearest 5 mins, others to nearest 15). Or if our service reps have a charge out rate rounded to 2 hours, it would be nice to implement that on the component itself, rather than a validation check.

We could pass in an object for each unit increment option that allows us to set what the increment is for each value (hour, minute).

This tool does a really good job at handling this scenario (see 'increment' https://github.com/fengyuanchen/pickerjs/blob/master/README.md#options)

It also handles scenarios like break/lunch durations better because it allows the ability to turn on/off AM/PM through a string format, or what if I only want minutes or hours?

For example, if I want to implement a break/lunch duration time picker (hh:mm format), I would have to manually hide the am/pm buttons through ::ng-deep, then trim the AM/PM off the text on the timeChanged event. I'm still new to your tools, so this may be possible, but I haven't seen anything in the documentation about it.

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.7.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No