Vue bootstrap datetimepicker
https://github.com/ankurk91/vue-bootstrap-datetimepicker/
by superasn
HTML
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue2-sidebar.min.js"></script>
<div id="app">
<vue2-sidebar heading="this test" :links="links" :header-links="header"></vue2-sidebar>
</div>
JavaScript
//Initialize as global component
Vue.component('vue2-sidebar', Vue2Sidebar.default);
new Vue({
el: '#app',
data: {
links: [
{
label: 'Home', href: '/home', links: [
{label: 'Home #1', href: '/home1'},
{
label: 'Home #2', href: '/home2', links: [
{label: 'Home #2.1', href: '/home1.1', icon: 'fa-warning'},
{
label: 'Home #2.2', href: '/home1.2', links: [
{label: 'Home #2.2.1', href: '/home1', icon: 'fa-plus-circle'},
{label: 'Home #2.2.2', href: '/home3'},
]
},
{label: 'Home #1.3', href: '/home1.3'},
]
},
{label: 'Home #3', href: '/home3'},
],
},
{label: 'Link #2', href: '#/link2', icon: 'fa-glass'},
{separator: true},
{label: 'Link #3', href: '#/link3', class: 'list-group-item-danger'},
{label: 'Link #4', href: '#/link4'},
{label: 'Link #5', href: '/link5', type: 'button'},
],
header: [
{label: 'Header #1', href: '#/header1'},
{label: 'Header #2', href: '#/header2'},
{label: 'Header #3', href: '#/header3', icon: 'fa-glass'},
],
},
});