Get started with vue-bootstrap-datetimepicker CDN
MIT licensed
Vue-Bootstrap-Datetimepicker is a Vue.js component for using Bootstraps datetimepicker in Vue applications.
Tags:- vue
- bootstrap
- bootstrap-datetimepicker
- vue-bootstrap-datetimepicker
- datepicker
- timepicker
Stable version
Copied!
How to start using vue-bootstrap-datetimepicker CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with vue-bootstrap-datetimepicker CDN - cdnhub.io</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.0-beta1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.cdnhub.io/vue-bootstrap-datetimepicker/5.0.1/vue-bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div id="app">
<div class="container mt-5">
<form @submit.prevent="submitForm">
<div class="form-group">
<label for="datepicker">Select a date:</label>
<b-form-datepicker id="datepicker" v-model="selectedDate" :min="minDate" :max="maxDate" class="mb-2"></b-form-datepicker>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
selectedDate: new Date(),
minDate: new Date(2021, 0, 1),
maxDate: new Date(2021, 11, 31)
},
methods: {
submitForm() {
console.log('Selected date:', this.selectedDate);
}
}
});
</script>
</body>
</html>
Copied!
Copied!