Suggestion: Time Duration property editor

[hfloyd]

If you are looking for an idea for another property editor...
How about one for time duration - like years/months/days/hours/mins/seconds?

I was looking for one today, and only came across this forum thread: https://our.umbraco.com/forum/umbraco-8/99027-timepicker-property-editor

I envision the config to allow the selection of the max-min options (ex: hours-seconds, months-hours, years-days, etc.) so an appropriate range can be provided (like, for the duration of a class, perhaps days-minutes would be appropriate options, task milestones might be months-days...)

The UI for the Property editor would show separate number boxes for each available option:

And a PropertyValueEditor could return the data as a Timespan struct...

[leekelleher]

@hfloyd I like this idea! 🎉

Several times (over the years) I've had a need to enter a duration - for videos, courses, recipe timings, etc. I'd typically ended up using a numeric value of the lowest dominator, e.g. number of seconds/minutes - then calculating the TimeSpan from that value.

I've give some thought on how it could be implemented. 💡

[hfloyd]

Yay! Yes, I've done that before as well - picking something like seconds or minutes... but not as editor-friendly. (Seems you always have to get out a calculator...) Also, just looking at the number of seconds in a textbox doesn't give you a good ideas of the value at a glance...

[hfloyd]

Ps. I suck at Angular, but am happy to help in whatever way, even if just as a tester ;-)

[hfloyd]

Looking closer at the TimeSpan struct, I see that "days" is the maximum aspect, which makes sense, since "month" and "year" are variable, based on the specific month/year in question, and the idea of "Duration" is a quantity separate from specific DateTimes. Knowing a number of "days" one could calculate months/years if a specific "start" date was provided.

So, I'd like to amend my request to only allow options from days down to seconds, to match the TimeSpan:

[hfloyd]

FYI - I came across this: https://angular-slider.github.io/angularjs-slider/
Not sure if it might help?