kpsahni7 has introduced an elegant date picker component for Vue js called Vue Draggable Cal, Which is compatible with Vue 2.x. It has many customization options like you can prepend and disable days, weeks, or months, etc.

Installation

You can install this package via npm or yarn. Just run these commands.

npm i vue-draggable-cal --save
or

yarn add vue-draggable-cal

Import this component:

import DraggableCal from 'vue-draggable-cal';

export default {
  // ...
  components: {
    DraggableCal,
  },
  // ...
};

Or you can utilize it directly from a CDN:

<div id="app">
  <DraggableCal></DraggableCal>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-draggable-cal"></script>
<script>
new Vue({
  el: '#app',
  components: {
    DraggableCal,
  }
})
</script>

Usage

Next you’ve to include this draggable-cal in your vue component:

<draggable-cal></draggable-cal>

<!-- OR -->

<DraggableCal></DraggableCal>

Emits events

<DraggableCal @selectedDate="doSomething($event)"></DraggableCal>

Available props

This package has many props that you can customize according to your need.

For more details about this component, you can visit its complete documentation on Github with code examples & source code.