javascript - How to change vuetify calendar interval format to 24 hours? - Stack Overflow

admin管理员组

文章数量:1348070

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

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

• javascript
• vue.js
• calendar
• vuetify.js

Share Improve this question Follow edited Jun 18, 2019 at 11:38 Ronnco asked Jun 17, 2019 at 10:56 RonncoRonnco 13111 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Got it.

intervalFormat(interval) {
        return interval.time
    }

Add this to your v-calendar:

 :interval-format="intervalFormat"

Create a new function equal to this:

  intervalFormatter(locale, getOptions) {
     return locale.time;
  }

本文标签： javascriptHow to change vuetify calendar interval format to 24 hoursStack Overflow