Installation
Install the component using the preferred package manager
yarn add @vuepic/vue-datepicker
# or
npm install @vuepic/vue-datepicker
Then import and register component
Note: css
file is imported separately
Global
In the main file
import { createApp } from "vue";
import App from './App.vue';
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
const app = createApp(App);
app.component('Datepicker', Datepicker);
app.mount('#app');
Local
In the .vue
files
<template>
<Datepicker v-model="date"></Datepicker>
</template>
<script>
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
export default {
components: { Datepicker },
data() {
return {
date: null,
};
}
}
</script>
<template>
<Datepicker v-model="date"></Datepicker>
</template>
<script>
import { ref } from 'vue';
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
export default {
components: { Datepicker },
setup() {
const date = ref();
return {
date
}
}
};
</script>
<template>
<Datepicker v-model="date"></Datepicker>
</template>
<script setup>
import { ref } from 'vue';
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
const date = ref();
</script>
Alternatively, you can import the scss
file if you want full control of the component styles
@import '@vuepic/vue-datepicker/src/VueDatePicker/style/main.scss';
Browser
Register and use component in the .html
file
Keep in mind that when you use unpkg to import the component, global component name will be VueDatePicker
Add JavaScript files
<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/@vuepic/vue-datepicker@latest"></script>
Add CSS file
<link rel="stylesheet" href="https://unpkg.com/@vuepic/vue-datepicker@latest/dist/main.css">
Register and use the component
<script>
const app = Vue.createApp({
components: { Datepicker: VueDatePicker },
}).mount("#app");
</script>
That's it, you are ready to go