12 hour format on time that allows inline edit.

Question

12 hour format on time that allows inline edit.

CChristiansen23 opened this issue 5 years ago · comments

Quasar's date and time pickers allow a mask to be able to format the display on a q-input (not in the picker).
mask="YYYY-MM-DD hh:mm A"

I was able to accomplish something similar with a computed property using display-value, however, I lose the ability to type directly into the input field. Would be awesome to have the same functionality that "mask" gives on the original date/time pickers from quasar v1.

Tobias Mesquita · Answer 1 · Thu Jun 13 2019 04:03:01 GMT+0800 (China Standard Time)

Currently, i can't define a custom mask definition like:

T: {  pattern: '[apAP]', negate: '[^apAP]', transform: v => v.toLocaleUpperCase() }`

what do u think about a extra button, who will toggle between AM and PM?
Eg.: https://codepen.io/tobias-mesquita/pen/OeVbMd?editors=1010

CChristiansen23 · Answer 2 · Thu Jun 13 2019 04:23:09 GMT+0800 (China Standard Time)

I think a toggle for that would work. I am using datetime mode on my pickers to display the date and time in the same input. Having the time display in 12 hour format to the users with an am/pm toggle, while still being able to inline edit would work great.

Tobias Mesquita · Answer 3 · Thu Jun 13 2019 04:23:52 GMT+0800 (China Standard Time)

Eg.: https://codepen.io/tobias-mesquita/pen/OeVbMd?editors=1010
(try to type [A], [P], [Arrow Up], [Arrow Down] or click in the AP/PM)

Tobias Mesquita · Answer 4 · Thu Jun 13 2019 10:01:37 GMT+0800 (China Standard Time)

feature implement on ver 1.0.0-beta.1