Installation
Install the component using the preferred package manager
yarn add vue3-date-time-picker
# or
npm install vue3-date-time-picker
1
2
3
4
5
2
3
4
5
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 'vue3-date-time-picker';
import 'vue3-date-time-picker/dist/main.css'
const app = createApp(App);
app.component('Datepicker', Datepicker);
app.mount('#app');
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Local
In the .vue
files
<template>
<Datepicker v-model="date"></Datepicker>
</template>
<script>
import Datepicker from 'vue3-date-time-picker';
import 'vue3-date-time-picker/dist/main.css'
export default {
components: { Datepicker },
data() {
return {
date: null,
};
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<Datepicker v-model="date"></Datepicker>
</template>
<script>
import { ref } from 'vue';
import Datepicker from 'vue3-date-time-picker';
import 'vue3-date-time-picker/dist/main.css'
export default {
components: { Datepicker },
setup() {
const date = ref();
return {
date
}
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<Datepicker v-model="date"></Datepicker>
</template>
<script setup>
import { ref } from 'vue';
import Datepicker from 'vue3-date-time-picker';
import 'vue3-date-time-picker/dist/main.css'
const date = ref();
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Alternatively, you can import the scss
file if you want full control of the component styles
@import 'vue3-date-time-picker/src/Vue3DatePicker/style/main.scss';
1
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 Vue3DatePicker
Add JavaScript files
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue3-date-time-picker@latest/dist/vue3-date-time-picker.min.js"></script>
1
2
2
Add CSS file
<link rel="stylesheet" href="https://unpkg.com/vue3-date-time-picker@latest/dist/main.css">
1
Register and use the component
<script>
const app = Vue.createApp({
components: { Datepicker: Vue3DatePicker },
}).mount("#app");
</script>
1
2
3
4
5
2
3
4
5
That's it, you are ready to go