CODEWITHSUNDEEP
vuetify.js
Gayan Sandamal
Gayan Sandamal

Reputation: 337

How to change Vuetify v-text-input component's time format from am/pm to 24 hours

According to my client's requirement I'm using Vuetify's v-text-field to show time field instead of timepicker and I want to show it by 24 hours format and to remove clock icon from the field. My code is like below,

<v-text-field
  value="12:30:00"
  type="time"
></v-text-field>

I tried passing format="24hr" props like in time picker component but nothing works.

Upvotes: 0

Views: 3348

Answers (2)

D4rkPK
D4rkPK

Reputation: 11

in case it is still useful to you, I have created a DigitalTimePicker that, unlike the TimePicker, is a simpler and more minimalist version.

If you want to take a look https://www.npmjs.com/package/vuetify-more-component

Upvotes: 1

Tarkan
Tarkan

Reputation: 561

You will have to change the format property of the v-time-picker and not the v-text-field and to remove the clock from the v-text-field you will just have to remove the prepend-icon property from it.

Here's a modified CodePen from the official docs, showing the changes: https://codepen.io/pmtarkan/pen/JjJjQXr

Upvotes: 1

Related Questions