Usage (Vue)

Plugin

Vue 2

In your app.js

import Vue from 'vue'
import vueDatePicker from '@dmuy/datepicker/vue-datepicker'

// default
Vue.use(vueDatePicker)

// Or add some global options
Vue.use(vueDatePicker, { theme: 'dark', format: 'mmmm d, yyyy' })

Vue 3

In your app.js

import { createApp } from 'vue'
import vueDatePicker from '@dmuy/datepicker/vue3-datepicker'

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

// default
app.use(vueDatePicker)

// Or add some global options
app.use(vueDatePicker, { theme: 'dark', format: 'mmmm d, yyyy' })

Nuxt

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

In nuxt.config.js

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

Nuxt 3

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

import vueDatePicker from '@dmuy/datepicker/vue3-datepicker'

export default defineNuxtPlugin((nuxtApp) => {
  // default
  nuxtApp.vueApp.use(vueDatePicker)
  // or add some global options
  nextApp.vueApp.use(vueDatePicker, { theme: 'dark', format: 'mmmm d, yyyy' })
})

Note: This method is not yet tested.

Markup

Component

Use as a component (custom element)

<!-- default -->
<du-datepicker />

<!-- with options -->
<du-datepicker :options="{ auto: true, format: 'yyyy-mm-dd' }" data-theme="red" data-maxdate="today" />

Calling built-in methods

Add a ref property to the component:

<du-datepicker ref="datepicker" />

Call method:

// set theme
this.$refs.datepicker.setTheme('dark')

// set value
this.$refs.datepicker.setValue('12/01/2021')

// call multiple setters
this.$refs.datepicker.set({
  setTheme: 'dark',
  setValue: '12/01/2021'
})

See list of built-in methods here: built-in methods

Directive

Use as directive

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

<!-- with options -->
<input type="text" v-du-datepicker="{ auto: true, format: 'yyyy-mm-dd' }" data-theme="red" data-maxdate="today" />