How to Implement Datepicker in Vue 2 Application

Last Updated on by in Vue JS

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

Make sure to choose Vue js 2 option from the given list.

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 --legacy-peer-deps

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.