Performant Multilingual Vue Datepicker Component

Install & Download:

# Yarn
$ yarn add vue-awesome-datepicker
# NPM
$ npm i vue-awesome-datepicker

Description:

An awesome, zero dependency, performant, multilingual Vue date picker component for modern web app.

How to use it:

1. Import the Awesome Datepicker component.

import datepicker from "vue-awesome-datepicker";

2. Register the component.

export default {
  components: {
    datepicker,
  }
};

3. Add the date picker component to the app 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 date range selection.

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

6. Determine the theme of the date picker: ‘yellow’ or ‘pink’.

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

7. All available component props.

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