Steps To Use Vue.js Bootstrap Datepicker

This example will help you to integrate Vue.js Bootstrap Datepicker with your Vue.js app.

Datepicker is a very crucial element for a modern web application.

So, it’s very important to choose a datepicker carefully while starting a development for your application. Because once it’s installed, it will be used throughout the app.

Therefore, you should choose a responsive and compatible datepicker for your app. That’s why I thought let me share an example on bootstrap datepicker with Vue.js that will surely work for you.

So, let’s get started to implement a simple Vue.js bootstrap datepicker example.

1. Install Vue.js app

Note: You can skip this step, if you already have app installed and ready.

First of all, create a simple Vue.js app.

vue init webpack vue-bootstrap-datepicker

Next, let’s go to the project and install the dependencies.

cd vue-bootstrap-datepicker
npm install

Now, you’re ready to use your app.

2. Install and Use Vue.js Bootstrap Datepicker

First of all, let’s install bootstrap datepicker in your Vue.js app.

# npm

npm install vue-bootstrap-datetimepicker --save

OR # Yarn

yarn add vue-bootstrap-datetimepicker

Once installed, let’s import the datepicker and necessary CSS in your main.js to make sure that we configure the datepicker in a way to use it throughout the app by putting just a few lines of code.

// Import this component
import datePicker from 'vue-bootstrap-datetimepicker'
// Import required dependencies 
import 'bootstrap/dist/css/bootstrap.css'
import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css'

Next, let’s call the component globally in main.js.

Vue.component('datePicker', datePicker)

That’s it! now you can use datepicker component in any component of your Vue.js app.

<date-picker v-model="date" :config="config"></date-picker>

Moreover, here is a full code with Vue.js bootstrap datepicker example.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// Import datePicker component
import datePicker from 'vue-bootstrap-datetimepicker'
// Import required dependencies 
import 'bootstrap/dist/css/bootstrap.css'
import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css'

Vue.config.productionTip = false

Vue.component('datePicker', datePicker)

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

<template>
  <div id="app">
    <div class="container">
    <div class="row">
      <div class="col-md-12">
        <date-picker v-model="date" :config="config"></date-picker>
        {{date}}
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
      return {
        date: new Date(),
        config: {
          format: 'DD/MM/YYYY',
          useCurrent: false,
        }       
      }
    }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

It’s simple, Right?

Finally, run your app using following command.

npm run dev

And open your app at https://www.thetechieshouse.com:8080 in your browser window.

It’s the easiest way use Vue.js bootstrap datepicker with your Vue.js app and make it global to use it throughout your app.

Furthermore, if you’re looking to try some more options for your datepicker, you can visit bootstrap datepicker Github repository and datepicker options.