Add a Datepicker to a Vue App

The vue-datepicker package lets us add a datepicker with ease.

To use it, first we have to install it by running:

npm i vuejs-datepicker

Then we can use it in our component by adding:

<template>
  <div id="app">
    <datepicker v-model="date"></datepicker>
    <p>{{date}}</p>
  </div>
</template>

<script>
import Datepicker from "vuejs-datepicker";

export default {
  name: "App",
  components: {
    Datepicker
  },
  data() {
    return {
      date: new Date()
    };
  }
};
</script>

We registered the component in the components property.

The data method returns an object with the date field which we use with v-model.

The datepicker component is used to show the date picker and let users pick a date.

We have the date displayed below the date picker.

We can set the language of the date picker with the language prop.

To use it, we write:

<template>
  <div id="app">
    <datepicker v-model="date" :language="fr"></datepicker>
    <p>{{date}}</p>
  </div>
</template>

<script>
import Datepicker from "vuejs-datepicker";
import { fr } from "vuejs-datepicker/dist/locale";

export default {
  name: "App",
  components: {
    Datepicker
  },
  data() {
    return {
      date: new Date(),
      fr
    };
  }
};
</script>

We import the locale object from the vuejs-datepicker package so we can set it as the value of the language prop.

Also, we can disable dates by setting the disable-dates prop.

For instance, we can write:

<template>
  <div id="app">
    <datepicker v-model="date" :disabled-dates="disabledDates"></datepicker>
    <p>{{date}}</p>
  </div>
</template>

<script>
import Datepicker from "vuejs-datepicker";

export default {
  name: "App",
  components: {
    Datepicker
  },
  data() {
    return {
      date: new Date(2020, 4, 1),
      disabledDates: {
        from: new Date()
      }
    };
  }
};
</script>

Then we disable dates from today and on.

We set the from property to disable a date from this date onwards.

The same object can have the to property to set the end range of the disabled dates.

We can also have a dates array property to disable individual dates.

In addition, we can have the days property to disable one or more dates of the week.

Also, we have daysOfMonth to disable dates by the days of the month.

And we can also have a customPredictor method that returns true to disable dates.

We can add a date formatted function to format our dates.

For instance, we can write:

<template>
  <div id="app">
    <datepicker v-model="date" :format="customFormatter"></datepicker>
    <p>{{date}}</p>
  </div>
</template>

<script>
import Datepicker from "vuejs-datepicker";

export default {
  name: "App",
  components: {
    Datepicker
  },
  data() {
    return {
      date: new Date(2020, 4, 1)
    };
  },
  methods: {
    customFormatter(date) {
      return date.toLocaleString();
    }
  }
};
</script>

We have a customFormatter method to return the locale date string instead of the regular one.

It’s set as the value of the format prop.

Then the selected date will be displayed as the formatted version.

The vuejs-datepicker package is a flexible date picker that’s also easy to use.

It supports locale changes and disabling date ranges so users can’t select them.

We can also format the date that’s selected.