Vue 2 Tutorial- How To Implement Datepicker In A Vue Js Application

Vue Js Datepicker Tutorial; In this Vue Js guide, we will get to know how to add the date picker widget in our Vue js application using the vuejs-datepicker package for the scratch.

 

Many times, we need to select a particular date from the date picker whenever we need to make a booking of a bus, train, flight, show, etc.

Most of us already know that the date picker is that component that makes us select a date in web or mobile apps which is a small pop-up calendar tied to the form input field.

 

So, let’s now see how to integrate this useful feature in our Vue apps.

 

Vue Js Datepicker Integration Tutorial

Step 1- Set Up Vue Development Environment

Step 2- Add Vue Datepicker Plugin

Step 3- Register Datepicker Component

Step 4- Add Simple Date Picker in Vue Js

Step 5- Set Custom Date In Vue Datepicker

Step 6- Reform Vue Datepicker Date Format

Step 7- Start Vue App

 

Step 1- Set Up Vue Development Environment

The very basic step for starting with the implementation is just to install Vue CLI. We will be creating a new Vue app using the below- given commands which would install Vue CLI, download the app, and step inside the app:

npm install -g @vue/cli
vue create da-vinci-app
cd da-vinci-app

 


Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

 

To remove the above error for invoking the app, do remember to update the “scripts”: [] array in the package.json file.

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

 

Step 2- Install Vue Datepicker Plugin

Further, we have to install the vuejs-datepicker plugin since this is the best package for adding the date picker in Vue.

So, we open the terminal and install this plugin with the help of the following command:

npm i vuejs-datepicker

 


Step 3- Register Datepicker Component

Here, we will be knowing how to create a new Vue component which would be the locus of date picker feature. For that, we head over to the components folder and create the DatePicker.vue file.

Afterward, we add the given code in components/DatePicker.vue: 

<template>
  <div>
     
  </div>
</template>
 
<script>
import Datepicker from 'vuejs-datepicker';
export default {
  name: "App",
  data() {
    return {
  
    };
  }
};
</script>

 

Further, we need to get into the src/App.vue file and register the date picker component:

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

 


Step 4- Add Simple Date Picker In Vue Js

Here, in this step, we will be adding the date picker widget in Vue. So, we head over to the components/DatePicker.vue and place the below code in it:

<template>
    <div>
        <h2>Vue Simple Datepicker Example</h2>
        <Datepicker></Datepicker>
    </div>
</template>
<script>
    import Datepicker from 'vuejs-datepicker'
    export default {
        name: 'app',
        components: {
            Datepicker
        }
    }
</script>

 

Step 5- Set Custom Date In Vue Datepicker

We can set a predefined date in date picker calendar. We can modify the previous code to add the custom date in the datepicker widegt:

<template>
    <div>
        <h2>Add Custom Date in Datepicker</h2>
        <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(2021, 5,  5)
            }
        }
    }
</script>

Step 6- Reform Vue Datepicker Date Format

This property is simply about customizing the date format of the date picker. We can pass our desired format prop using the following command:

<template>
    <div>
        <Datepicker v-model="customDate" format="dd-MM-yyyy"></Datepicker>
    </div>
</template>
<script>
    import Datepicker from 'vuejs-datepicker'
    export default {
        name: 'app',
        components: {
            Datepicker
        },
        data: function(){
            return {
              customDate: new Date()
            }
        }
    }
</script>

Step 7- Start Vue App

We have to use this npm command in order to start the Vue app:

npm run serve

 

Conclusion

So, friends, we have seen how to integrate the date picker in Vue js app.

We created a date picker component and saw how to display a calendar popup with the date widget in Vue.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *