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/bootstrap-icons@1.5.0/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!

All versions