Installation

With NPM:

npm install vue-airbnb-style-datepicker --save

With Yarn:

yarn add vue-airbnb-style-datepicker

NB: This plugin is dependant on VueJS 2.x and date-fns (for date manipulation). Make sure you have these dependencies installed.

Enable plugin in your app

First off, tell Vue to use the plugin in your main.js:

import Vue from 'vue'
import App from './App.vue'

// import component and stylesheet
import AirbnbStyleDatepicker from 'vue-airbnb-style-datepicker'
import 'vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.min.css'

// see docs for available options
const datepickerOptions = {}

// make sure we can use it in our components
Vue.use(AirbnbStyleDatepicker, datepickerOptions)

new Vue({
  el: '#app',
  render: h => h(App),
})

The options is optional. It is only needed if you want to overwrite default colors, texts etc. For example if your site uses another language than english. Note that days and daysShort always should start with Monday. So if you want Sunday as the first day in the week, use sundayFirst: true (but days and daysShort should still start with Monday)

Use plugin

Add datepicker in your component like this:

<template>
  <div>
    <div class="datepicker-trigger">
      <input
        type="text"
        id="datepicker-trigger"
        placeholder="Select dates"
        :value="formatDates(dateOne, dateTwo)"
      >

      <AirbnbStyleDatepicker
        :trigger-element-id="'datepicker-trigger'"
        :mode="'range'"
        :fullscreen-mobile="true"
        :date-one="dateOne"
        :date-two="dateTwo"
        @date-one-selected="val => { dateOne = val }"
        @date-two-selected="val => { dateTwo = val }"
      />
    </div>
  </div>
</template>

<script>
import format from 'date-fns/format'

export default {
  data() {
    return {
      dateFormat: 'D MMM',
      dateOne: '',
      dateTwo: ''
    }
  },
  methods: {
    formatDates(dateOne, dateTwo) {
      let formattedDates = ''
      if (dateOne) {
        formattedDates = format(dateOne, this.dateFormat)
      }
      if (dateTwo) {
        formattedDates += ' - ' + format(dateTwo, this.dateFormat)
      }
      return formattedDates
    }
  }
}
</script>

NB: Note that you need to wrap the datepicker in a <div class="datepicker-trigger">. This is used as the base for the positioning of the datepicker. Also note that the id of element that triggers the datepicker needs to be the same as prop :trigger-element.

This plugin does not dictate how you show the dates. This allows for more flexibility since you can use whatever trigger element you want. The value is being emitted from the component when a date is selected, and handled in the @date-one-selected and @date-two-selected methods. Then you just assign the value to your data properties. And it is up to you to decide how you want to display the dates.
The formatDates() methods is just an example of how it can be solved.

Options for Vue.use(AirbnbStyleDatepicker, datepickerOptions)

Example with all available options:

Vue.use(AirBnbStyleDatepicker, {
  sundayFirst: false,
  dateLabelFormat: 'dddd, MMMM D, YYYY',
  days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
  daysShort: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  monthNames: [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
  ],
  colors: {
    selected: '#00a699',
    inRange: '#66e2da',
    selectedText: '#fff',
    text: '#565a5c',
    inRangeBorder: '#33dacd',
    disabled: '#fff',
    hoveredInRange: '#67f6ee'
  },
  texts: {
    apply: 'Apply',
    cancel: 'Cancel',
    keyboardShortcuts: 'Keyboard Shortcuts',
  },
  ariaLabels: {
    chooseDate: (date) => date,
    chooseStartDate: (date) => `Choose ${date} as your start date.`,
    chooseEndDate: (date) => `Choose ${date} as your end date.`,
    selectedDate: (date) => `Selected. ${date}`,
    unavailableDate: (date) => `Not available. ${date}`,
    previousMonth: 'Move backward to switch to the previous month.',
    nextMonth: 'Move forward to switch to the next month.',
    closeDatepicker: 'Close calendar',
    openKeyboardShortcutsMenu: 'Open keyboard shortcuts menu.',
    closeKeyboardShortcutsMenu: 'Close keyboard shortcuts menu'
  },
  keyboardShortcuts: [
    {symbol: '↵', label: 'Select the date in focus', symbolDescription: 'Enter key'},
    {symbol: '←/→', label: 'Move backward (left) and forward (right) by one day.', symbolDescription: 'Left or right arrow keys'},
    {symbol: '↑/↓', label: 'Move backward (up) and forward (down) by one week.', symbolDescription: 'Up or down arrow keys'},
    {symbol: 'PgUp/PgDn', label: 'Switch months.', symbolDescription: 'PageUp and PageDown keys'},
    {symbol: 'Home/End', label: 'Go to the first or last day of a week.', symbolDescription: 'Home or End keys'},
    {symbol: 'Esc', label: 'Close this panel', symbolDescription: 'Escape key'},
    {symbol: '?', label: 'Open this panel', symbolDescription: 'Question mark'}
  ],
})

Properties, events & slots for <AirbnbStyleDatepicker />

Example with all properties (not recommended, only to show values):

<AirbnbStyleDatepicker
  :trigger-element-id="'datepicker-trigger'"
  :mode="'range'"
  :date-one="dateOne"
  :date-two="dateTwo"
  :min-date="'2018-10-12'"
  :end-date="'2021-01-01'"
  :offset-x="10"
  :offset-y="30"
  :months-to-show="2"
  :start-open="true"
  :fullscreen-mobile="true"
  :mobile-header="'Mobile header text'"
  :inline="true"
  :enabled-dates="['2018-12-01', '2018-12-08']"
  :disabled-dates="['2018-10-20', '2018-10-22']"
  :customized-dates="[
    { cssClass: 'booked', dates: ['2019-03-20', '2019-03-21'] },
    { cssClass: 'not-available', dates: ['2019-04-24', '2019-03-25'] }
  ]"
  :show-action-buttons="true"
  :trigger="someBooleanDataProp"
  :close-after-select="true"
  @date-one-selected="val => { dateOne = val }"
  @date-two-selected="val => { dateTwo = val }"
  @opened="onOpenedMethod"
  @closed="onClosedMethod"
  @cancelled="onCancelMethod"
  @apply="onApplyMethod"
  @previous-month="onChangeMonthMethod"
  @next-month="onChangeMonthMethod"
/>