What type of q-input can I use for time entry?
-
I have been working with Vue.js for a while and feel the need for something like Quasar to improve my productivity for user interfaces, so I’ve been taking a look at it and like what I see so far.
I work best when I have something simple and specific to create in a framework, so I’d like to do a running times calculator with Quasar as an easy starter. One of the things I need to do there is have the user input a time as hours:minutes:seconds, e.g. ‘1:29:14’. So how best to do this? I assume standard time inputs wouldn’t work because they’re for time of day, not duration. I was thinking a mask such as ‘##:##:##’ would work, but the hours bit may be optional, and I would need to constrain the minutes and seconds to a maximum of 59. I know how to do all this ‘manually’, so to speak, but I was hoping Quasar would give me something neat which would allow this.
-
Someone else suggested a way to input time for a timer and this could work in general for a time entry. Have a look. It’s just an idea.
https://codepen.io/smolinari/pen/dyMgrqK
Scott
-
I like it, but it’s difficult to be precise with it. I just need direct numeric input, really.
-
Is it? I find it precise on desktop.
You’d probably need three input fields, not just one, if you are looking just for input fields.
Scott
-
If I use “type=‘time’” as a prop for q-input, it allows me to select a time from a control, which I’m not interested in, but it also does something I am interested in, namely to select the entire part of the hour/minute/seconds component you click in. I.e., if it is showing e.g. ‘17:23’ and you click anywhere after the colon, ‘23’ is selected, and if you click before, ‘17’ is selected. Similarly once you have completed typing the hours bit, the cursor skips straight to the minutes bit and highlights that. This is what I would like to be able to do. I have looked at the source code and I really can’t work out how it is doing this. I could work this out from first principles and do my own equivalent but I was hoping there was some functionality there I could reuse.
