Vue bootstrap datetimepicker
https://github.com/ankurk91/vue-bootstrap-datetimepicker/
HTML
<link rel="stylesheet" href="https://unpkg.com/@fortawesome/fontawesome-free-webfonts@1.0.9/css/fontawesome.css">
<link rel="stylesheet" href="https://unpkg.com/@fortawesome/fontawesome-free-webfonts@1.0.9/css/fa-solid.css">
<link rel="stylesheet" href="https://unpkg.com/@fortawesome/fontawesome-free-webfonts@1.0.9/css/fa-regular.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/pc-bootstrap4-datetimepicker@4.17.50/build/css/bootstrap-datetimepicker.min.css">
<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/moment@2.18.1/min/moment.min.js"></script>
<script src="https://unpkg.com/pc-bootstrap4-datetimepicker@4.17.50/build/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://unpkg.com/vue@2.5/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-bootstrap-datetimepicker@5"></script>
<div id="app" class="container m-4">
<div class="row">
<div class="col">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-primary" type="button" @click="$refs.dp1.dp.show()"><i class="fas fa-calendar"></i></button>
</div>
<date-picker ref="dp1" name="date" v-model="date1"></date-picker>
{{date1}}
</div>
</div>
<div class="col">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-primary" type="button" @click="$refs.dp2.dp.show()"><i class="fas fa-calendar"></i></button>
</div>
<date-picker ref="dp2" name="date" v-model="date2"></date-picker>
{{date2}}
</div>
</div>
</div>
</div>
JavaScript
// Initialize as global component
Vue.component('date-picker', VueBootstrapDatetimePicker);
new Vue({
el: '#app',
data: {
date1: null,
date2: null,
},
});