-
Notifications
You must be signed in to change notification settings - Fork 20
Usage (Vue)
Dionlee Uy edited this page Apr 19, 2023
·
8 revisions
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' })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' })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'
]
}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.
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" />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
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" />