How can I display time with AM/PM with a q-input control?

[paulm]

I’m following the examples for a nice time entry control:

<q-input filled v-model="entry.StartTime" mask="time" :rules="['time']">
  <template v-slot:append>
    <q-icon name="access_time" class="cursor-pointer">
    <q-popup-proxy transition-show="scale" transition-hide="scale">
      <q-time v-model="entry.StartTime" />
    </q-popup-proxy>
    </q-icon>
  </template>
</q-input>

It works, but displays 4:00 PM as: 16:00. I’ve looked through the docs but I don’t see a way to set a mask that does this. I changed the mask to “##:## AM” but (no surprise) that doesn’t work. Are there any predefined mask/rules that would work for this?

[s.molinari]

Here is an example with QDate. Notice the “A” in the masks.

https://codepen.io/smolinari/pen/dyPoXdZ?editors=1010

Found here: https://quasar.dev/quasar-utils/date-utils#Format-for-display

Scott

[paulm]

Thanks, but that doesn’t seem to work. I only need the time. But, ignoring that, if you change the time to something like 2:30 PM, it is still displayed as 14:30 PM.

[s.molinari]

Yeah. That was a test to see if you were paying attention to the date and time formatting bit in the docs. The answer to that problem is there too.

But, here is the solution too. https://codepen.io/smolinari/pen/dyPoXdZ?editors=1010

Scott

[paulm]

Great, thanks. Here’s what (seems) to work for me.

<div id="q-app">
  <div class="q-pa-md" style="max-width: 170px">
      <q-input filled v-model="date" mask="##:## AM" >  
        <template v-slot:append>
          <q-icon name="access_time" class="cursor-pointer">
            <q-popup-proxy transition-show="scale" transition-hide="scale">
              <q-time v-model="date" mask="hh:mm A"></q-time>
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>
    </div>
</div>

[paulm]

Just a follow up - this also required me to also upgrade from Quasar 1.4.5 to 1.5.4.