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

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

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
<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
<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

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

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

That's it, you are ready to go

Last Updated: 12/4/2021, 9:32:10 PM