How to Implement Datepicker in Vue 2 Application

Vue Js datepicker tutorial; In this comprehensive guide, we will show you how to whimsically add the date picker widget in the vue js application using the vuejs-datepicker package from the absolute beginning.

We are sure you all have at some point of time visited the sites where you need to select a date from the date picker, be it making a booking of bus, train, or flight ticket or creating some events.

The date picker is a valuable component to select date in web or mobile applications, and it is a small popup calendar tied to the form input field.

When a user clicks on it, an interactive popup appears with the date options allowing users to select a date.

Vue Js Datepicker Integration Tutorial

• Step 1: Set Up Vue Development Environment
• Step 2: Add Vue Datepicker Package
• 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

Set Up Vue Development Environment

Setting up the vue development environment is as easy as eating pie; there are three commands which will install vue cli, download the vue app, and stepping inside the app.

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

Node.js Gatsby error – “digital envelope routines::unsupported …”

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 above error for invoking the app, make sure to update the "scripts": [] array in 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"
},

Install Vue Datepicker Plugin

It won’t be wrong to say this section is the essential part of this tutorial, and you have to install the vuejs-datepicker library from the node repo using the npm command.

There are a plethora of plugins, which might be helpful for you related to the date selection task. However, we are using the vuejs-datepicker plugin, and this is the best package for adding datepicker in vue.

npm i vuejs-datepicker

Register Datepicker Component

This section reveals about creating a new vue component which will be the locus of date picker feature, head over to components folder create DatePicker.vue file.

There after, place the offered code in components/DatePicker.vue file.

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

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>
    <DatePicker />
  </div>
</template>
<script>
import DatePicker from './components/DatePicker.vue'
export default {
  name: 'App',
  components: {
    DatePicker
  }
}
</script>

Add Simple Date Picker in Vue Js

Eventually, we will add the datepicker widget in vue, head over to components/DatePicker.vue and place the suggested code in the file.

<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>

Set Custom Date in Vue Datepicker

We can set a predefined date in datepicker calendar, you can tweak the previous code to add the custom date in the datepicker widget.

<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>

Reform Vue Datepicker Date Format

The format property is all about customizing the date format of the datepicker; pass the format prop with your desired date format.

<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>

Start Vue App

It is inevitable to start the app; this will allow you to test the app and see the functionality in the browser.

npm run serve

http://localhost:8080

Conclusion

We have successfully integrated date picker in vue js; here is what we did so far. We created a new vue app, installed and configured the vue js date picker plugin in the vue app.

We created a date picker component, showed you how to display calendar popup with the date widget in vue; we hope we have cleared the concept with gratification.