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



  • 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?



  • 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



  • 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.



  • 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



  • 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>
    


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


Log in to reply