Installation
Install the component using 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
- Regular setup
<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
- Composition API
<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
Alternatively you can import SCSS file if you want a full control of the component styles
@Import 'vue3-date-time-picker/src/Vue3DatePicker/styles/main.scss';
1
That's it, you are ready to go.