How To Use Datepicker In Vue.js

In this article, I will guide you on how to use Datepicker in Vue.js.

Prerequisites 

• Familiarity with the HTML ,JavaScript and Bootstrap 
• node.js installed

Create Vue.js Project

To create a Vue.js app, use the following command in the terminal.

vue create demo-app

 Install Vue Datepicker Package

Install Vue Datepicker Package  using following npm command

npm i vuejs-datepicker

Create a new component

Now create a new component in components folder, right click on the components folder and add a file named 'DatePicker.vue'

Add the following code to this component

<template>
    <div>
      <h3> How to Use Datepicker in Vue.js </h3> 
        <Datepicker v-model="customDate" ></Datepicker>
    </div>
</template>
<script>
import Datepicker from 'vuejs-datepicker'
export default {
    name: 'app',
    components: {
        Datepicker
    },
    data: function() {
        return {
            customDate: new Date(2022, 9, 9)
        }
    }
}
</script>

Now open App.vue component. add the following code in App.vue component

<template>
  <div id="app">
    <Datepicker msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
import Datepicker from './components/DatePicker.vue'
export default {
  name: 'App',
  components: {
    Datepicker
  }
}
</script>

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

Run the App

Now run the application using following npm command

npm run serve 

To customize the date format of the datepicker, pass the format prop with the required date format, add the following code in Datepicker.vue component

<template>
    <div>
      <h3> How to Use Datepicker in Vue.js </h3> 
        <Datepicker v-model="customDate" format="dd-MMMM-yyyy" ></Datepicker>
    </div>
</template>
<script>
import Datepicker from 'vuejs-datepicker'
export default {
    name: 'app',
    components: {
        Datepicker
    },
    data: function() {
        return {
            customDate: new Date(2022, 9, 9)
        }
    }
}
</script>

Run the app Now.

Summary

In this article, we learned how to use Datepicker in Vue.js.