Usage (Vue)

Plugin

Vue 2

In your app.js

import Vue from 'vue'
import vueTimePicker from '@dmuy/timepicker/vue-timepicker'

// default
Vue.use(vueTimePicker)

// Or add some global options
Vue.use(vueTimePicker, { theme: 'dark', is24hour: true })

Vue 3

In your app.js

import { createApp } from 'vue'
import vueTimePicker from '@dmuy/timepicker/vue3-timepicker'

const app = createApp({
  /* root component options */
})

// default
app.use(vueTimePicker)

// Or add some global options
app.use(vueTimePicker, { theme: 'dark', is24hour: true })

Nuxt

In the plugins folder, create mdtimepicker.js and paste the Vue 2 script above (only use one line of Vue.use())

In nuxt.config.js

export default {
  plugins: [
    '@/plugins/mdtimepicker.js'
  ]
}

Nuxt 3

Create a plugin file plugins/mdtimepicker.client.js.

import vueTimePicker from '@dmuy/timepicker/vue3-timepicker'

export default defineNuxtPlugin((nuxtApp) => {
  // default
  nuxtApp.vueApp.use(vueTimePicker)
  // or add some global options
  nuxtApp.vueApp.use(vueTimePicker, { theme: 'dark', is24hour: true })
})

Note: This method is not yet tested.

Markup

Component

Use as a component (custom element)

<!-- default -->
<mdtimepicker />

<!-- with options -->
<mdtimepicker :options="{ is24hour: true, hourPadding: true }" data-theme="red" data-mintime="now" />

Directive

Use as directive

<!-- default -->
<input type="text" v-mdtimepicker />

<!-- with options -->
<input type="text" v-mdtimepicker="{ is24hour: true, hourPadding: true }" data-theme="red" data-mintime="now" />