Use Datepicker in Vue.js

image source
Tutorial this time, I want to share tutorial about time. yes surely its in a website we often intersect with time. even more for the dynamic web. time must change at any time. I will discuss about the datepicker library which is quite famous and complete its documentation, but its usual datapicker in use with jquery, this time I will use it in vue.js, how to use it, we just start

What Will I Learn?

• Install Module with NPM
• Use Component Datepicker
• Customization Datepicker

Requirements

• Install Nodejs and Npm
• Internet Connection
• Basic Html, Javascript

Difficulty

• Basic

Install Module with NPM

Before we start installing the vue-select package, make sure you have installed nodejs , so you can use Npm. to check its version npm -v

and now you can install the date-picker. Open your folder that has installed vue-cli. open command prompt . and then you can install .
npm install vuejs-datepicker --save, for notes. i added --save: it's means you want to save in your package.json

Use Component Datepicker

After we successfully install the datepicker with Npm Module, next we will use it inside the component. I have App.vue component and we will use the datepicker component in there.

<template>
  <div id="app">
    <h1>Date Picker in Vue.js</h1>
      <div style="margin-left:35%;">
        <datepicker></datepicker>
      </div>
  </div>
</template>
<script>
import Datepicker from 'vuejs-datepicker'
export default {
  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;
  margin-top: 60px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
</style>

import Datepicker from 'vuejs-datepicker' : Imported the module datepicker as variable Datepicker.
components:{Datepicker} : After we import Datepicker, before using it we have to register first in property components
< datepicker >< /datepicker > : Now we can use the component datepicker like this.

If all the processes are done well. then the result will be like this .

Customization Datepicker

Bind Data With Props
We can use props for bind data in vuejs , the first step we can set local variable in property data.

data(){
    return{
      date: new Date(2016, 9,  16)
    }
  },

We create a variable date , I made the default time new Date(2016, 9, 16)
< datepicker :value="date">< /datepicker > We can use props :value="date" , :value is the name of props. "date" is local variable . and this is the results

Use events
We can use event or methods to run a function when the datepicker is open, selected, and closed.
We can use like this
< datepicker @opened="openCalender" @closed="closeCalender" >< /datepicker >
@opened="openCalender" : @opened is function to open calender , and "openCalender" is the name of function we will define in properti methods

@closed="closeCalender" : @closed is function to close calender , and "closeCalender" is the name of function we will define in properti methods

and now i will define the name of functions in methods. I will simply add status to know the calender is open or close . with local variable status in data() .

 data(){
    return{
      date: new Date(2016, 9,  16),
      status:''
    }
  },
 methods:{
    openCalender(){
      this.status="Calender is open"
    },
    closeCalender(){
      this.status="Calender is close"
    }
  }

When No actions

openCalender() triggered

closeCalender() triggered

Disable Times
I will disabled time to and from . I will make data local variable as object disabled: { } .

  data(){
    return{
      disabled: {
        to: new Date(2018, 1, 15), // Disable all dates up to specific date
        from: new Date(2018, 2, 1), // Disable all dates after specific date
      }
    }
  },

And in the object disabled whe have , to and from . and after we have defined object in local data. now we will bind with component < datepicker :disabled="disabled" >< /datepicker >. and we will see the results like this.

Well if there is no mistake and you follow the steps correctly, you will succeed in making the disabled time you want. Feel free to try another event and property in https://github.com/charliekassel/vuejs-datepicker. so much of me hopefully this tutorial can help you to use date for your web needs. thank you

---

Posted on Utopian.io - Rewarding Open Source Contributors

---