No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    2
    6
    739
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      paulm last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

        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

        1 Reply Last reply Reply Quote 0
        • P
          paulm last edited by

          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.

          1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by

            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

            1 Reply Last reply Reply Quote 1
            • P
              paulm last edited by

              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>
              
              1 Reply Last reply Reply Quote 0
              • P
                paulm last edited by

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

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post