Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change vuetify calendar interval format to 24 hours?

I'm using vuetify calendar with type week and it shows time in 12 hour format with AM and PM. How do i change that to 24 hour format?

I looked at the documentation and didn't find much, except that u can pass interval-format prop that expects a function. Also found a function at vuetify github.

    <v-calendar
                :now="today"
                :value="today"
                color="primary"
                locale="et"
                type="week"
                :interval-format="intervalFormat"
            >
            </v-calendar>

methods: {
        intervalFormat() {
            const longOptions = { timeZone: 'UTC', hour12: true, hour: '2-digit', minute: '2-digit' }
            const shortOptions = { timeZone: 'UTC', hour12: true, hour: 'numeric', minute: '2-digit' }
            const shortHourOptions = { timeZone: 'UTC', hour12: true, hour: 'numeric' }

            return longOptions
        }
    }

I wanted 24 hour format but it's still 12 hour format

like image 490
Ronnco Avatar asked Jan 27 '23 04:01

Ronnco


1 Answers

Got it.

intervalFormat(interval) {
        return interval.time
    }
like image 133
Ronnco Avatar answered Jan 29 '23 08:01

Ronnco