Vue Awesome Datepicker is a great, no-dependency, performance, multilingual Vue date picker component for a modern web application.

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-awesome-datepicker

# NPM
$ npm i vue-awesome-datepicker

1. Import the Awesome Data Picker component.

import datepicker from "vue-awesome-datepicker";

2. Register the component.

export default {
  components: {
    datepicker,
  }
};

3. Add the date picker component to the application template.

<datepicker v-model="date" />

export default {
  components: {
    datepicker,
  },
  data() {
    return { date: {} };
  },
};

4. Enable the date picker to select multiple dates.

<datepicker v-model="date" type="multiple" />

5. It also supports setting the date range selection.

<datepicker v-model="date" type="range" />

6. Select the date picker theme: “Yellow” or “Pink”.

<datepicker v-model="date" colorTheme="pink" />

7. All component props available.

date: { type: Object },
lang: { type: String },
type: { type: String },
debugSelector: { type: Boolean ,default:false },
colorTheme: { type: String },
preSelectedModel: { type: Object },
holidayMap: { type: Object },
disabledMap: { type: Object },
events: { type: Array },
forwardLimit: { type: Object },
backwardLimit: { type: Object },
selectable: { type: Object },

See Demo And Download

Official Website(MohammadS3dd): Click Here

This superior jQuery/javascript plugin is developed by MohammadS3dd. For extra Advanced Usage, please go to the official website.