How To Add Datepicker In Vue.js App

In this article, we will learn how to add datepicker in a Vue.js application. 

Prerequisites

• Basic knowledge of Vue.js 
• Visual Studio Code IDE should be installed on your system.
• Basic knowledge of HTML and CSS

Create Vue.js project

Create a Vue.js project by using the following command.

vue create datepicker

Open the newly created project in Visual Studio Code and install vue-englishdatepicker using the following command. 

npm install vue-englishdatepicker

Now open this project in VS code and install bootstrap

npm install bootstrap-vue bootstrap --save

Now open the main.js file and import bootstrap reference.

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Now right click on the components folder and add a new component named 'Datepick.vue'. Now open Datepick.vue component and add the following code.

<template>
  <div>
    <div class="row" style="margin-bottom: 0px;">
      <div class="col-sm-12 btn btn-info"> Datepicker in Vue.js </div>
    </div>
    <div class=" row col-sm-12">
      <div class="col-sm-4"></div>
      <div class="col-sm-4" style="margin:10px">
        <vue-englishdatepicker placeholder="YYYY-MM-DD" />
      </div>
    </div>
  </div>
</template>
<script>
  import VueEnglishdatepicker from 'vue-englishdatepicker';
  export default {
    name: "Datepick",
    components: {
      VueEnglishdatepicker
    },
    data() {
      return {
        customDate: new Date()
      }
    }
  }
</script>
<style lang="scss" scoped></style>

Now open App.vue component and import the dropdowndemo component. add the following code in App.vue component.

<template>
  <div id="app">
    <Datepick />
  </div>
</template>
<script>
  import Datepick from './components/Datepick.vue'
  export default {
    name: 'App',
    components: {
      Datepick
    }
  }
</script>
<style></style>

Now run the application by using 'npm run serve' command and check.

We can hide year and month option from the datepicker. Add the following code in the component.

<template>
  <div>
    <div class="row" style="margin-bottom: 0px;">
      <div class="col-sm-12 btn btn-info"> Datepicker in Vue.js </div>
    </div>
    <div class=" row col-sm-12">
      <div class="col-sm-4"></div>
      <div class="col-sm-4" style="margin:10px">
        <vue-englishdatepicker placeholder="YYYY-MM-DD" format="DD-MM-YYYY" value="11-11-2021" :yearSelect="false" :monthSelect="false" />
      </div>
    </div>
  </div>
</template>
<script>
  import VueEnglishdatepicker from 'vue-englishdatepicker';
  export default {
    name: "Datepick",
    components: {
      VueEnglishdatepicker
    },
    data() {
      return {
        customDate: new Date()
      }
    }
  }
</script>
<style lang="scss" scoped></style>

Now run the application by using 'npm run serve' command and check.

Summary

In this article, we learned about how to add datepicker in Vue.js application.