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.

Prop	Type	Default	Description
days	Number	365	Number of days to append
months	Number	12	Numbers of months to append (has precedence over days if custom set)
years	Number	0	Number of years to append and enable year mode
prependedMonths	Number	1	Number of months to preppend
prependedYears	Number	0	Number of years to prepend. Note: This prop is ignored if years is not set
disabledWeekDays	Object	{}	Disable a specific weekday by setting it’s day number to true. ie. {0: true} will disable sundays
disabledDates	Array	[]	Disable a specific date. Format of the day should be a string YYYY-MM-DD ie. [‘2018-01-01’]
pastIsDisabled	Boolean	true	Allows the selection of already past days and prepend the days of prepended months
fullMonths	Boolean	false	Weither or not to always use complete months (i.e. days=1 if set to true the whole month is going to be appended)
accentColor	String	#00008b	Set the accent color (HEX or CSS color names)
lang	String	EN	Language

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