Vue Js Create and Use Datepicker Component Tutorial

This step-by-step tutorial will make you acquainted with every handy instruction that will help you create the vue js datepicker component, not just that but also tell you how to use the datepicker widget in the Vue js app.

Datepicker is a valuable component in web applications; It allows users to select a date from the calendar widget and use it for booking tickets, creating an event, etc.

To implement a simple datepicker in the Vue js app, we start with setting up the vue development environment, installing the date picker package, creating a date picker component, and showing you how to use datepicker in the vue js app.

How to Add Simple Datepicker in Vue Js App

  • Step 1: Install Vue Js App
  • Step 2: Install Bootstrap Packages
  • Step 3: Update Bootstrap in Main js
  • Step 4: Create Calendar Component
  • Step 5: Add Simple Bootstrap Date Picker in Vue Js
  • Step 6: Set Minimum and Maximum Dates
  • Step 7: View App on Browser
  • Step 8: Conclusion

Install Vue Js App

If, anyhow, you haven’t configured the vue project, execute all the suggested commands sequentially to initialize the vue app development process.

npm install -g @vue/cli
vue create vue-dark-matter
cd vue-dark-matter

Install Bootstrap + VueBootstrap Packages

Based on the choice of your package manager, execute either of the commands to install bootstrap and bootstrap-vue plugins altogether.

# npm
npm install vue bootstrap bootstrap-vue


# yarn
yarn add vue bootstrap bootstrap-vue

Update Bootstrap in Main js

Next, import BootstrapVue, and IconsPlugin from ‘bootstrap-vue’ module, at the same time inject both the packages in use method in src/main.js file.

import Vue from 'vue'
import App from './App.vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

new Vue({
  render: h => h(App)
}).$mount('#app')

Create Calendar Component

In this section, we need to form a component/Calendar.vue template file; this will be the locus of the datepicker component.

Next, get into the src/App.vue file and register the date picker component; it will load in the view when the app loads.

<template>
  <div>
    <Calendar/>
  </div>
</template>

<script>
    import Calendar from './components/Calendar.vue'

    export default {
      name: 'App',
      components: {
        Calendar
      } 
    }
</script>

Add Simple Bootstrap Date Picker in Vue Js

In this section, you will need to open the component/Calendar.vue file, then define the b-form-datepicker directive, also pass the v-model property to invoke the date selection.

The b-form-datepicker is a BootstrapVue custom date picker input form control, which meets entirely with WAI-ARIA compliance on top of that offers internationalization support.

By default, the b-form-datepicker directive returns the date in YYYY-MM-DD format with string type.

<template>
  <div>
    <label>Select a date</label>
    
    <b-form-datepicker v-model="value" class="mb-2"></b-form-datepicker>
    
    <p>Date: '{{ value }}'</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      }
    }
  }
</script>

Set Minimum and Maximum Dates

Seldom, you might need to set a minimum and maximum range of dates; it is effortless to restrict the date range with min and max properties.

<template>
  <div>
    <label>Select a date</label>

    <b-form-datepicker v-model="value" :min="min" :max="max" locale="en"></b-form-datepicker>
  </div>
</template>

<script>
  export default {
    data() {
      const now = new Date()
      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
      
      const minDate = new Date(today)
      minDate.setMonth(minDate.getMonth() - 2)
      minDate.setDate(15)
      
      const maxDate = new Date(today)
      maxDate.setMonth(maxDate.getMonth() + 2)
      maxDate.setDate(15)

      return {
        value: '',
        min: minDate,
        max: maxDate
      }
    }
  }
</script>

View App on Browser

We have successfully integrated datepicker in the vue js app; now, you can run the development server and view and use the datepicker and calendar component on the browser.

npm run serve
http://localhost:8080

Vue js datepicker example

Conclusion

To make the process excessively convenient, we used the Bootstrap Vue js package; not only the calendar component, but this great library also helps you integrate other JavaScript-powered components in the vue js app.

Thus, when it comes to creating a vue js datepicker widget, you must use this package; of course, you don’t have to reinvent the wheel all over again.