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.