Vuetify time get value in 12hrs format with "A.M." or "P.M."

I want to do an time picker in vuetify and get the value of time in 12hrs format with " A.M. " or " P.M. "

I attempt to get the time in 12hrs but there's an error.

First load. I get :undefined value.

If I pick time in AM, I get no problem but not showing AM.

If I pick time in PM, this is what I got.

What I want to do is get the time data with AM and/or PM.

How can I achieve this?

I attempt this kind of condition, but It's not getting the "A.M" / "P.M" value.

{{ 
    (time.split(':')[0] >= 13 ? time.split(':')[0] % 12 : time.split(':')[0])
    + ':' + time.split(':')[1], time.split(':')[0] >= 13 ? 'PM' : 'AM' 
}}

Codepen

Personally, trying to do everything on one line leads to issues like this for me. It's hard to get working right, and it's even harder to read/understand. I prefer to break it out into a method where the process can be performed and understood over multiple steps. Using the v-timepicker update:period method to keep track of AM/PM also helps

<h3>
    12hrs time: 
    {{ standardTime() }}
</h3>
<input type="time" v-model="time" />
<v-time-picker v-model="time" @update:period="changePeriod"></v-time-picker>

data() {
    return {
      time: '',
      period: 'am'
    }
  },
  methods: {
    standardTime() {
      const militaryHours = this.time.split(':')[0]
      const minutes = this.time.split(':')[1]
      const standardHours = militaryHours % 12 === 0 ? 12 : militaryHours % 12
      return `${standardHours}:${minutes} ${this.period.toUpperCase()}`;
    },
    changePeriod(period) {
      this.period = period
    }
  }

updated codepen

...and if you really want, you can condense it all into one line now that the individual parts are working

function standardTime() {
    return `${this.time.split(':')[0] % 12 === 0 ? 12 : this.time.split(':')[0] % 12}:${this.time.split(':')[1]} ${this.period.toUpperCase()}`;
}

Lovely. Hopefully it won't require any future maintenance

I suggest that you take advantage of the native Intl.DateTimeFormat API. It allows you to configure the style of the string outputted and adapts to the user's locale.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      time: '',
    }
  }
})

<!-- language: lang-html -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.1.12/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.1.12/vuetify.min.js"></script>

<div id="app">
    <v-app>
        <v-card id="table-card">
          <div>
            <h3>
                24hrs time: 
                {{ time }}
            </h3>

            <h3>
                12hrs time: 
                {{ 
                    // year = 0, month = 0, day = 0. hour and minute are set to the hour and minute from the time picker
                    new Date(0, 0, 0, ...time.split(":"))
                      .toLocaleString(undefined, { timeStyle: "short" })
                }}
            </h3>
            <input type="time" v-model="time" />
            <v-time-picker v-model="time"></v-time-picker>
        </div>
        </v-card>
    </v-app>
</div>

<!-- end snippet -->